Question

有更好/更直接的方法吗？

function moveNav(){
   var navOffset = $(".nav-marker").offset().top;
    $(window).scroll(function() {
      var scrollOffset = $(document).scrollTop();
      if( scrollOffset >= navOffset ){
         $(".nav-bar").addClass("scroll-fixed");
      } else{
         $(".nav-bar").removeClass("scroll-fixed");
      }
    });
}
moveNav();
// call again on resize to recompute navOffset
$(window).resize(function() {
  moveNav();
});

我希望在调整浏览器大小时再次使用moveNav()功能，但我目前正在做的方式感觉不对。我觉得有一种方法可以在resize()函数中移动moveNav()函数，但是当我把它放在里面时，当我调整大小时会出现一些滞后现象。你可以在这里看到它：https://jsfiddle.net/grj89t9b/2/

有更好的方法吗？

Answer 1

我首先声明变量，然后创建一个更简单的函数，然后在$(window).resize()和$(document).scroll()上声明它。

var navOffset, scrollOffset;
function moveNav(){
    navOffset = $(".nav-marker").offset().top;
    scrollOffset = $(document).scrollTop();
    if( scrollOffset >= navOffset ){
        $(".nav-bar").addClass("scroll-fixed");
    } else {
        $(".nav-bar").removeClass("scroll-fixed");
    }
}
moveNav();
$(document).scroll(function() { moveNav(); });
$(window).resize(function() { moveNav(); });

它适用于您的JSFiddle。

在调整内部调整大小的函数时滞后

1 个答案: