Issues arise with the functionality of the sticky navigation script following a browser resize

Question

Issues arise with the functionality of the sticky navigation script following a browser resize

I recently came across a jQuery script for sticky navigation that I've implemented on a website.

$(function() {

    // get the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

    // determine whether the navigation bar should have "fixed" css position or not
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); 

        if (scroll_top > sticky_navigation_offset_top) { 
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':-23, 'left':0 });
        } else {
            $('#sticky_navigation').css({ 'position': 'relative', 'top':-30 }); 
        }   
    };

    sticky_navigation();

    $(window).scroll(function() {
        sticky_navigation();
    });
});

Unfortunately, the script only functions smoothly if I do not resize the browser after loading the site. When I resize, the script does not account for the new size and the navigation bar moves to different positions while scrolling. I attempted to add

$(window).resize(function() {
    sticky_navigation();
});

but it did not resolve the issue.

It seems like updating the top offset after a resize is necessary. Since I am not well-versed in programming, any suggestions with code examples would be greatly appreciated.

I hope someone can provide assistance.

EDIT: Link to example on jsfiddle: http://jsfiddle.net/p9Lvbz68/8/

jquery html css

Answer 1

Answer №1

Start off by defining sticky_navigation_offset_top inside the sticky_navigation function, not outside of it.

Next, make sure to utilize

$(window).on('scroll resize',function() {

This means your code should look something like this:

$(document).ready(function() {

    // the function that determines whether the navigation bar should have a "fixed" css position or not
    var sticky_navigation = function(){
        // get the initial top offset of the navigation 
        var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

        var scroll_top = $(window).scrollTop(); // current vertical position from the top

        // if user has scrolled more than the navigation bar, change its position to fixed to stick to the top, otherwise revert back to relative
        if (scroll_top > sticky_navigation_offset_top) { 
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':-23, 'left':0 });
        } else {
            $('#sticky_navigation').css({ 'position': 'relative', 'top':-30 }); 
        }   
    };

    // execute the function on page load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).on('scroll resize',function() {
        sticky_navigation();
    });
});

Answer 2

Start off by defining sticky_navigation_offset_top inside the sticky_navigation function, not outside of it.

Next, make sure to utilize

$(window).on('scroll resize',function() {

This means your code should look something like this:

$(document).ready(function() {

    // the function that determines whether the navigation bar should have a "fixed" css position or not
    var sticky_navigation = function(){
        // get the initial top offset of the navigation 
        var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

        var scroll_top = $(window).scrollTop(); // current vertical position from the top

        // if user has scrolled more than the navigation bar, change its position to fixed to stick to the top, otherwise revert back to relative
        if (scroll_top > sticky_navigation_offset_top) { 
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':-23, 'left':0 });
        } else {
            $('#sticky_navigation').css({ 'position': 'relative', 'top':-30 }); 
        }   
    };

    // execute the function on page load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).on('scroll resize',function() {
        sticky_navigation();
    });
});

Answer 3

Answer №2

Have you considered the impact of setting 'top':-23 in your CSS on the mathematical calculation in the if condition? Scrolltop cannot be lower than the offset when the offset is negative, and the lowest scrolltop value is 0 (I have not verified if this is the actual behavior).

Try running these statements in the console:

Console.log(scroll_top); Console.log(sticky_navigation_offset_top);

Especially after this line of code:

var scroll_top = $(window).scrollTop();

Observing the message log in the console while scrolling after resizing should help you test this theory.

However, it's still unclear why this works prior to resizing...

------- Update ---------

Upon reviewing your fiddle, the jumping issue may stem from making an element fixed, thus removing it from the layout flow. Consequently, the content shrinks, causing a noticeable jump on the page.

Here's an example for clarity: http://jsfiddle.net/snn0xj4h/. I added a top margin to the header to compensate for the jump (not the ideal fix, but it could be a temporary solution).

    if (scroll_top > sticky_navigation_offset_top) { 
        $('#sticky_navigation').css({ 'position': 'fixed', 'top':"-23px", 'left':0 });
        $('#header').css("margin-top", $('#sticky_navigation').height());
    } else {
        $('#sticky_navigation').css({ 'position': 'relative', 'top':"-30px" }); 
        $('#header').css("margin-top", 0);
    }

Answer 4

Have you considered the impact of setting 'top':-23 in your CSS on the mathematical calculation in the if condition? Scrolltop cannot be lower than the offset when the offset is negative, and the lowest scrolltop value is 0 (I have not verified if this is the actual behavior).

Try running these statements in the console:

Console.log(scroll_top); Console.log(sticky_navigation_offset_top);

Especially after this line of code:

var scroll_top = $(window).scrollTop();

Observing the message log in the console while scrolling after resizing should help you test this theory.

However, it's still unclear why this works prior to resizing...

------- Update ---------

Upon reviewing your fiddle, the jumping issue may stem from making an element fixed, thus removing it from the layout flow. Consequently, the content shrinks, causing a noticeable jump on the page.

Here's an example for clarity: http://jsfiddle.net/snn0xj4h/. I added a top margin to the header to compensate for the jump (not the ideal fix, but it could be a temporary solution).

    if (scroll_top > sticky_navigation_offset_top) { 
        $('#sticky_navigation').css({ 'position': 'fixed', 'top':"-23px", 'left':0 });
        $('#header').css("margin-top", $('#sticky_navigation').height());
    } else {
        $('#sticky_navigation').css({ 'position': 'relative', 'top':"-30px" }); 
        $('#header').css("margin-top", 0);
    }

Issues arise with the functionality of the sticky navigation script following a browser resize

Answer №1

Answer №2

Similar questions

Creating a dynamic Bootstrap navigation bar using PHP

What steps should be taken to ensure that data can be transmitted from the input without allowing the user to edit the ID field?

Reformat a table in Asp.Net Bootstrap to ensure optimal display on mobile devices through a media query,

Hierarchy in CSS: The battle between author and user styling

What is the best way to upload a profile picture to the header of my website?

Set up an event listener for all buttons to detect clicks, and proceed to initiate an AJAX request to

Utilizing JQuery AJAX for Effortless Caching with PHP Endpoints

Increase the font size of the text inside a table cell without altering the cell's width

What defines a quick or sluggish load time when it comes to a webpage?

Unveiling and Shifting Among Concealed HTML Forms

The alignment of input boxes is off

Struggling with PHP variables and AJAX JavaScript

Issue with scrolling feature in div

jquery personalized auto-suggest

Storing user input from Vue.js in a JavaScript array for future use

Animating slides with CSS Keyframes and React, incorporating toggle slide fade out and slide fade (back) in

The cropper fails to load within the image element inside a modal pop-up

Creating a stationary navbar and sidebar with Bootstrap for your website

Difficulty with spacing in HTML/CSS styling

Tips on adjusting video to the screen size