Question

我有一个带有徽标和汉堡图标的导航栏，当滚动到达某个锚点时，该图标应该改变颜色（淡入一个版本并淡出另一个版本）。它起初效果很好但是当我调整页面大小时它不再准确。

var targetOffset = $("#third-home-section").offset().top;

var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > targetOffset ) {   
        navWhite.fadeIn(100);
        navBlack.fadeOut(100);
        hamburgerWhite.fadeIn(100);
        hamburgerBlack.fadeOut(100);

    } else {

        navWhite.fadeOut(100);
        navBlack.fadeIn(100);
        hamburgerWhite.fadeOut(100);
        hamburgerBlack.fadeIn(100);
    }
});

在这种情况下我是否可以使用任何已知的解决方案？

Answer 1

在响应环境中编写jQuery函数的最简单方法是保存实际函数，并在$(window).resize()上调用它

看到您正在运行滚动功能，您可以将if语句（包括您的变量）保存在$(window).scroll()上运行的函数中，然后添加一个片段来运行它功能$(window).resize()。

见下面的例子：

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

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

function my_responsive_function() {
    var targetOffset = $("#third-home-section").offset().top;
    if ( $w.scrollTop() > targetOffset ) {   
        navWhite.fadeIn(100);
        navBlack.fadeOut(100);
        hamburgerWhite.fadeIn(100);
        hamburgerBlack.fadeOut(100);
    } else {
        navWhite.fadeOut(100);
        navBlack.fadeIn(100);
        hamburgerWhite.fadeOut(100);
        hamburgerBlack.fadeIn(100);
    }
}

修改

作为对代码出现问题的进一步解释，您需要设置变量targetOffset一次，每次需要运行时都应设置变量$("#third-home-section").offset().top。

基本上发生的是<body style="background-color:#004590;"> </body> <asp:Label ID="Label1" runat="server" ForeColor="#3366FF" Text="*Welcome to the Library Management System*"></asp:Label> <asp:Label ID="Label2" runat="server" BackColor="#66CCFF" BorderColor="Black" BorderStyle="Groove" Text="Sign Up Page:" Width="135p    I am a: <asp:ListBox ID="ListBox1" runat="server" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged1" Rows="3"></asp:ListBox> Username:                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>在不同的屏幕尺寸上具有不同的值，但如果设置一次，即使屏幕尺寸发生变化，它也会保持其值。在函数内部添加它会强制它重新检查相关元素的偏移量。

Answer 2

对@ Frits的答案进行了微小的改动和一点点高尔夫（大部分都是正确的）

// bind the listener to both events with 'on'
$(window).on('scroll resize', my_responsive_function); 

function my_responsive_function() {
    var targetOffset = $("#third-home-section").offset().top;
    if ( $(this).scrollTop() > targetOffset ) {  // $w was undefined 
        navWhite.fadeIn(100);
        navBlack.fadeOut(100);
        hamburgerWhite.fadeIn(100);
        hamburgerBlack.fadeOut(100);
    } else {
        navWhite.fadeOut(100);
        navBlack.fadeIn(100);
        hamburgerWhite.fadeOut(100);
        hamburgerBlack.fadeIn(100);
    }
}

编辑：你提到过“迟钝的＆＃39;绩效，请考虑debouncing执行my_responsive_function http://benalman.com/projects/jquery-throttle-debounce-plugin/

// include this jQuery plugin:
// http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js

// if 'scroll' or 'resize' are triggered more than once per 250ms,
// only the last trigger will actually execute
$(window).on('scroll resize', $.debounce( 250, false, my_responsive_function));

滚动到达锚点时JQuery执行X，调整大小时准确

2 个答案: