coming to a halt at a specific location near the bottom

I've searched through numerous threads on stackoverflow regarding this issue and attempted various solutions using jQuery, HTML, and CSS. Unfortunately, none of them seem to be working as expected for my situation. Can someone lend a helping hand?

Here is my HTML:

<div id="product-summary-position">
    <div id="product-fixed">
        <div id="product-summary">
            <header>Product Summary</header>
            <div class="price" name="product-summary-price">$0.00</div>
            <header>Have Questions?</header>
            <p>Call our Product Experts<br> 1-877-270-3311</p>
            <button class="btn-reset">Reset</button>
        </div>
    </div>
</div>

And here is my CSS:

#product-summary-position{float: right;
    height: 185px;
    width: 185px;}

div#product-summary {
    font-family: 'roboto';
    height: 230px;
    width: 185px;
    background-color: #2A0092;
    border-radius: 5px;
    text-align: center;
    color: #FFF;
    top: 250px;
}

div#product-fixed {
    position: fixed;
}

Despite my efforts, I'm still facing an issue where the product summary section overlaps with the footer (which is approximately 400px tall) when scrolling down. I have tried implementing solutions found online but haven't been able to resolve it successfully.

Any assistance would be greatly appreciated.

Edit: jsfiddle

jqueryhtmlcssscrolltop

Answer №1

Give this solution a try.

Resolution

Modify your HTML code as follows:

<div id="product-summary-position">
    <div id="product-fixed">
        <div id="product-summary">
            <header>Product Summary</header>
            <div class="price" name="product-summary-price">$0.00</div>
            <header>Have Questions?</header>
            <p>Call our Product Experts
                <br>1-877-270-3311</p>
            <button class="btn-reset">Reset</button>
        </div>
    </div>
</div>

<footer id="wholeFooter">
    <!-- reposition the entire footer to a separate block element -->
    <div class="footer2">
        ...
    </div>
    <div class="footer2">
        ...
    </div>
</footer>

Additionally, include the following JavaScript:

var doc = $(document); 

doc.scroll(function () {
     // ensure the entire footer is within a CSS selector
    var footer = $('#wholeFooter');
    var p = $('#product-fixed');
    var s = $('#product-summary-position');

    var top = doc.scrollTop() + s.offset().top * 2 + p.height();
    var footerTop = footer.offset().top;

    var offset = footerTop - top;

    if (offset < 0) {
        p.css({'margin-top': '' + offset + 'px'});
    } else {
        p.css({'margin-top': 0});
    }

});

Update:

The "fixed" class separation was not necessary in this scenario.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Is it possible to use a single ajax script for handling multiple input fields

I am currently working on a project that involves loading a <div> filled with videos from my Wistia account using JSON results. Each video in the list has a unique hashed_id associated with it. I am trying to find a way to send a DELETE request to th ...

jqueryajaxpost

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

javascripthtmlcssmicrosoft-edge

Tips for creating a two-tier selection filter system

I'm having an issue with this code. My objective is to create two filters for this table. The select element with id="myInput" should determine which rows appear in the table and apply the first filter. Here is the JavaScript code: function myFunctio ...

javascripthtml

Integrating XML API Requests Using HTML and JavaScript

When there is only one item in the XML document, I want to update my inner HTML with the result of an API call. I have managed to successfully make the API call work when there are multiple items in the XML document (thanks to W3). <!DOCTYPE html> ...

javascripthtml

The animation triggered by scrolling is not functioning on this element

I'm currently attempting to add a scroll animation to my section1 element, but for some reason, it's not working. This is puzzling to me because I've successfully implemented the same scroll code on another element without any issues. The on ...

javascriptjqueryhtmlcss

How to ensure the table fits perfectly on the screen using JQueryMobile and Cordova?

I've been working on a JavaScript function that creates a dynamic page and displays data fetched from a database. However, I've encountered an issue where the displayed data overflows past the width of the mobile screen. Is there a way to ensure ...

javascriptjquerycsscordovajquery-mobile

Creating styles for different screen sizes including mobile devices, low-resolution desktops, and high-resolution desktops

One of the techniques I'm using involves analyzing both the horizontal and vertical screen dimensions to differentiate between mobile devices and desktops, as well as distinguish high-resolution from low-resolution desktop displays. In order to achie ...

htmlcssmobile

Issue with DOMPDF producing empty PDF files

I am currently using the DOMPDF library version 0.6.0 beta 3 in PHP to generate PDF files. I have encountered an issue where some of my HTML content is not being processed correctly into PDF format. Despite validating my HTML with the W3C HTML validator, ...

phphtmlpdf-generationdompdf

Using JavaScript to dynamically insert HTML content and create a toggle effect

Within a div, I have a collection of large images that I am attempting to insert into another div using JavaScript toggle functionality. Please test the code snippet provided below. $(".toggleimages").on("click", function(e) { e.preventDefault(); ...

javascriptjqueryhtml

Is there unused space located at the bottom of the button?

Struggling to fix a coding issue related to formatting white space within a button. Sometimes the white space is at the top, other times at the bottom. Here's the CSS code that's not working #filter { position: relative; overflow: hi ...

htmlcss

Symfony: The Database Query Button with a Pop-up Feature

I am looking to create a button that will automatically search my database for all users with a "secouriste" attribute set and display their first name, last name, and phone number in a popup. After conducting research, here is what I have gathered: In m ...

javascriptphphtmlajaxsymfony

Angular JS Route Hijacking

Currently, I am developing an AngularJS application with Firebase as the backend system. One of my main goals is to require users to log in before accessing any part of the application. To achieve this, I plan on using Firebase's User Authentication ...

javascripthtmlangularjsfirebaseangularfire

Is the use of !important included in Bootstrap 4?

Even though I've positioned the style.css file after Bootstrap, it still isn't working. Upon inspection, I noticed that... https://i.sstatic.net/ay621.png How can I solve this issue? .bg-info{ background-color: #17a2b8 !important; } ...

htmlcsstwitter-bootstrapbootstrap-4css-specificity

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

javascripthtmlangularjsangularjs-scopehref

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

javascriptjqueryhtmlajax

Tips for positioning text above a dashed line in the blade template using Laravel and Bootstrap 4

I am working on a small Laravel project where I need to pass the variable {{$docno}} to a blade template. Below is the code snippet in the blade file. <body> <div class="container-fluid"> <div class="text-center"> ...

csslaravelbootstrap-4

Is it possible to execute this animation with a single click for repetitive playback?

CODEPEN const btt = document.querySelector('.btt'); btt.addEventListener('click', function(){ this.classList.toggle('anime'); }); Is there a way to achieve the desired effect with just one click? ...

javascripthtmljquerycsscss-animations

Coding in PHP, JavaScript, and HTML allows builders

I am facing some difficulties in locating my specific question, so I will describe it here. Currently, I am working with an oracle database and integrating it into an HTML website using javascript and php. I have successfully displayed the php file, but th ...

javascriptphphtmldatabase

Angular - ui-router states are not being detected

I'm currently working on a Spring and Angular JS web application project. The structure of the project is as follows:https://i.sstatic.net/xgB4o.png app.state.js (function() { 'use strict'; angular .module('ftnApp') .con ...

javascripthtmlangularjsangular-ui-router

Align pandas data frame to the right within a Flask application

My current project involves creating an API in Flask. One of the requirements is to display a pandas dataframe right next to the upload button on the web page. While I have been able to find information online about justifying column headers or text, I hav ...

pythonhtmlcsspandasflask