Div with fixed positioning experiencing glitching until reaching a specific height

I've been struggling to resolve an issue with a script that is supposed to scroll down with the page and stop at a specific height. However, right before it reaches the desired point, it temporarily disappears and then reappears.

For reference, here's the code snippet:

$(document).scroll(function () {
    var y = $(this).scrollTop();

    if (y > 280 && y < 1600) {
        $('#model').css("position","fixed");
        $('#icons').css("position","fixed");
        $('#icons').css("bottom",0);
    } else if (y >= 1601) {
        $('#model').css("position","absolute");
        $('#model').css("top",1600);
        $('#icons').css("position","absolute");
        $('#icons').css("top",1600);
    } else {
        $('#model').removeAttr( 'style' );
        $('#icons').removeAttr( 'style' );
        $('#icons').removeAttr( 'style' );
    }   
});

Any assistance would be greatly appreciated!

Answer №1

The glitch you mentioned may be the result of one of two situations:

  1. If your scrollTop value falls between 280 and 1599 (< 1600), with a value >= 1601, there will be an empty space at the scrollTop position 1600.
  2. As you scroll from bottom to top, if the top value of the #model div is not reset to its original state (0), it may extend beyond its container boundaries.

To resolve this issue, make the following adjustments in your code:

if (y > 280 && y < 1600) {
    $('#model').css("position","fixed");
    $('#model').css('top', 0);          // include this rule
    $('#icons').css("position","fixed");
    $('#icons').css("bottom",0);
} else if (y >= 1600) {                 // update condition to cover values greater than or equal to 1600
    $('#model').css("position","absolute");
    $('#model').css("top",1600);
    $('#icons').css("position","absolute");
    $('#icons').css("top",1600);

View JSFiddle Demo.

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

Jquery JSON AJAX Response Timing

I believe the key factor here is timing rather than the code itself. I am seeking advice on the best practice for obtaining a JSON response effectively. <script type="text/javascript"> $(window).load(function() { $(&apos ...

Designing a flexible layout that allows for both vertical and horizontal scrolling of content

I have successfully implemented a flexbox layout with fixed header, fixed footer, fixed menu, and scrolling content based on resources from various articles and Stack Overflow answers. However, I am facing difficulty in achieving horizontal scrolling for ...

What is the best way to align an element next to another using id or class?

I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...

The lua.vm.js ajax callbacks are triggering, but unfortunately, the requested data is not

After raising this issue at https://github.com/kripken/lua.vm.js/issues/5, I realized that submitting it to stackoverflow might yield a faster response due to higher exposure. To ensure clarity, I will restate my question: How can the callback data be acce ...

Is there a way to smoothly scroll while resizing a div using Resizable Jquery?

I've implemented AdminLTE 3 template and added a resizable div using jQuery-UI. When I expand the div's height, the page doesn't automatically scroll down with it. I don't want to add a scrollbar to the div; instead, I want the entire p ...

How can I load a URL without causing a page refresh?

While searching around, I stumbled upon this HTML 5 code snippet: window.history.pushState("object or string", "Title", "/new-url"); I started thinking: how can this be implemented? Is there a way to utilize this code to change the URL to without needin ...

What is the approach taken by jQuery in handling unsuccessful ajax requests?

I'm dealing with a code snippet that uses jQuery: $.get("go.php?action=sliderorder&right=5") .success(function(data){alert("success!");}) .fail(function(data){alert("failed!");}); After making the ajax call, I receive an error message stating: " ...

Why did the creators choose to integrate a dropdown menu into Twitter Bootstrap?

While exploring Twitter's Bootstrap framework, I couldn't help but be impressed. However, one feature that has left me a bit puzzled is the dropdown navigation menu. First of all, to view child links, you need to click on the parent. I understan ...

Tips on altering the h2 color when hovering using h2:hover:after

I'm attempting to alter the color of my h2 element using h2:hover:after. Can someone guide me on how to achieve this? Here is what I have tried so far. h2 { font-size: 25px; } h2:after { content: ""; display: block; width: 14%; padding-to ...

Is there a similar function in AngularJS that is equivalent to getJSON? Just curious, as I am new to this

As a beginner in javascript, angularJS, and JQuery, I recently embarked on programming an angularJS app that involves using JQuery to fetch JSON data from a webserver. Here is the code snippet I am working with: var obj = $.getJSON( "http://something.com/ ...

The daterangepicker reigns supreme above all other elements

Just a heads up, I am utilizing daterangepicker from this link: . Recently, I encountered an issue where the input field was overlapping with other elements like bootstrap Modals or menus. <div class="col-md-3 form-group"> <div class=&qu ...

The value of the innermost dropdown in the AngularJS Cascading dropdown is not being retrieved when it is selected

CSS <div ng-controller="DynamicCtrl"> <h1>Dynamic - Focused</h1> <p>This method works well when data is constantly changing</p> <div> Category: <select id="category" ng-model="items" ng-options="category ...

Dynamic Filtering with jQuery List

I'm attempting to create a dynamic filter list on keypress event. For example, if I type "It" into the input field, the elements that do not match this value will be hidden. I'm unsure if the code structure I have implemented below effectively ac ...

jQuery only works partly with IE

I am attempting to utilize jQuery to modify some css styles when the screen size is smaller than a specific threshold (essentially, recreating "@media screen and (max-width: 1024px)", but with consideration for older versions of IE that do not support this ...

Is it possible to use calc with the display property set to table-cell?

I have created a structure using divs to mimic table elements for an entry form. My goal is to make the left column, where field labels are located, 50% wide with an additional 2 em space to accommodate an asterisk marking required fields. The right column ...

Tips on how to center an image within a table cell:1. Insert the image

I've been attempting to center an image within a bootstrap4 table cell, but it keeps appearing on the left and even overlaps the border. I've tried adding inline styles like text-align: center; vertical-align: middle; both to the table cell HTML ...

How to optimize the utilization of Javascript variables within a Jquery function?

Currently, I am working on implementing an HTML5 min and max date range function. Initially, I wrote the code using variables and then embedded them in the correct attribute locations. However, after reviewing my code, my client (code reviewer) suggested ...

Ensure that the Javascript file is included before the CSS file to prevent any margin

I have external files for JavaScript and CSS. According to This question, they suggested that including JavaScript before CSS could enhance performance. However, I noticed a discrepancy in Chrome when I load JS before CSS - the .offset() function returns a ...

Curves are unable to form on borders using the border-radius property

While working on a webpage, I encountered an issue with CSS attributes and table borders. Despite using the border-radius attribute, the border didn't round along with the background; it just stayed at a corner. Below is my code snippet, any help is g ...

I am having trouble getting my ajax call to save data in the database despite no PHP or console errors appearing. What could be

I am attempting to create a rating system where users can rate from 1 to 5 stars, and then the average rating will be displayed. To accomplish this, I am utilizing Ajax, jQuery, PHP, MySQL, and HTML. Below is the basic code with the script and simple htm ...