Question

我找到了一个用于粘贴导航的jQuery脚本，我正在网站上使用。

$(function() {

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

    // the function that decides weather the navigation bar should have "fixed" css position or not
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // the current vertical position from the top

        // if user scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it 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 }); 
        }   
    };

    // run the function on load
    sticky_navigation();

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

如果我在加载网站后没有调整浏览器大小，它只会干净利落地工作。如果我执行调整大小，则脚本不知道新大小，并且滚动时导航栏会跳转到其他位置。我试着添加一个

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

但它没有做任何事情。

在调整大小后，告诉脚本检查顶部偏移量应该不难。 但我不是程序员，所以如果可以，请通过代码示例向我提出建议，而不仅仅是理论上的推动。

希望有人可以帮助我。

编辑： 以下是jsfiddle示例： http://jsfiddle.net/p9Lvbz68/8/

Answer 1

首先尝试在sticky_avigation函数中定义sticky_navigation_offset_top，而不是在

之外

第二次尝试使用$(window).on('scroll resize',function() {

所以你的代码应该像

$(document).ready(function() {

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

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

        // if user scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it 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 }); 
        }   
    };

    // run the function on load
    sticky_navigation();

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

Answer 2

在你的CSS中设置＆＃39; top＆＃39;： - 23在if条件下没有弄乱你的数学？即如果偏移是负的并且最低的涡旋顶可以是0，则scrolltop可以小于偏移量吗？（我还没有检查这是否是实际行为）。

CONSOLE.LOG（scroll_top）; CONSOLE.LOG（sticky_navigation_offset_top）;

行后：

var scroll_top = $（window）.scrollTop（）;

如果您在调整大小后滚动控制台中查看消息，可以帮助您测试此理论。

虽然这不能解释为什么它在调整大小之前有效...

-------编辑---------

在看着你的小提琴时，你的跳跃正在发生，因为当你修复某些东西时，你实际上正在从页面布局中删除它。不可避免地，您的内容会变得更短，页面也会跳跃。

我的意思的一个例子。 http://jsfiddle.net/snn0xj4h/。我已经在标题的顶部添加了一个保证金以说明跳转（不是解决此问题的正确方法，但它可能在短期内对您有用）。

    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);
    }

浏览器调整大小后，粘性导航脚本无法正常工作

2 个答案: