Question

我正在使用以下调整的jQuery代码来浮动我的WordPress页面侧边栏。

    function loadStaticSidebar(){

    //floating sidebar menu
    var $sidebar   = $("#sidebar"), 
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 15;
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

}

它存档我想要的内容...当我向下滚动页面时，它会保持相同的位置。

问题： 我希望它在到达页面底部时停止滚动。目前，永远不会停止骂，它打破了网站。有人告诉我，我需要在加载时测量窗口大小 - 不知道如何实现它....任何例子？

Answer 1

试试这个

$(function(){ // document ready

  if (!!$('#sidebar').offset()) { // make sure "#sidebar" element exists

    var stickyTop = $('#sidebar').offset().top; // returns number

    $(window).scroll(function(){ // scroll event

      var windowTop = $(window).scrollTop(); // returns number

      if (stickyTop < windowTop){
        $('#sidebar').css({ position: 'fixed', top: 0 });
      }
      else {
        $('#sidebar').css('position','static');
      }

    });

  }

});

WordPress jQuery驱动静态侧边栏

1 个答案: