位置：固定导航停止在特定div结束 - 视差滚动＆javascript

Question

我有一个垂直方向的垂直导航栏，我想停止在#contact结束。如果用户滚动备份，它将需要再次重新滚动。 达成此目的的最佳方法是什么？

JavaScript的使用：

$(function() { 
      $.fn.scrollBottom = function() { 
       return $(document).height() - this.scrollTop() - this.height(); 
      }; 

      var $el = $('#nav>div'); 
      var $window = $(window); 
      var top = $el.parent().position().top; 

      $window.bind("scroll resize", function() { 
       var gap = $window.height() - $el.height() - 10; 
       var visibleFoot = 340 - $window.scrollBottom(); 
       var scrollTop = $window.scrollTop() 

       if (scrollTop < top + 10) { 
        $el.css({ 
         top: (top - scrollTop) + "px", 
         bottom: "auto" 
        }); 
       } else if (visibleFoot > gap) { 
        $el.css({ 
         top: "auto", 
         bottom: visibleFoot + "px" 
        }); 
       } else { 
        $el.css({ 
         top: 0, 
         bottom: "auto" 
        }); 
       } 
      }).scroll(); 
     }); 

jsfiddle

Answer 1

我相信这是你正在寻找的代码：

$(function() { 
    var $Nav = $('#Nav'); 
    var $window = $(window); 
    var $contact = $('#contact'); 
    var maxTop = $contact.offset().top + $contact.height() - $Nav.height(); 
    window.navFixed = 1; 

    $window.bind("scroll resize", function() { 
     var currentTop = $window.scrollTop(); 
     if (currentTop <= maxTop && window.navFixed == 0) { 
      $Nav.css({ 
       position: 'fixed', 
       top: '5%' 
      }); 
      window.navFixed = 1; 
     } else if (currentTop > maxTop && window.navFixed == 1) { 
      $Nav.css({ 
       position: 'absolute', 
       top: maxTop 
      }); 
      window.navFixed = 0; 
     } 
    }).scroll(); 
}); 

的#Nav元素包含您最初指定的CSS：position: fixed; top: (...) 。文档准备好后，变量maxTop根据#contact元素的顶部和高度进行计算。

在scroll和resize事件上，变量currentTop被计算为当前滚动位置。如果此值低于maxTop，则#Nav设置为原始CSS;如果值较高，则应用新的CSS样式：position: absolute; top: maxTop;

window.navFixed用于防止CSS在滚动时不断更新。我相信这一点可以改进，但是，它证明了它的目的。

退房的JSFiddle为完整的HTML ..

PS。 代码中存在一个小错误，其中#Nav引用了<ul>元素，而不是<nav>元素。但是，移动元素是<ul>，它应该是<nav>。