滚动div,固定,再次滚动

时间:2013-04-09 12:09:39

标签: javascript jquery scroll sticky

我有一个页面布局,其中全宽图像位于顶部,然后右侧有文本内容。在左边,有一个带有社交链接的小滚动div。

就像这样:http://blog.teamtreehouse.com/building-a-jquery-sticky-sidebar-navigation-menu(社交链接滚动,然后固定,然后从另一个div滚动)。

这是一个例子,但下面没有最后一块拼图:http://jsfiddle.net/nwFrg/

            function sticky_relocate() {
          var window_top = jQuery(window).scrollTop();
          var div_top = jQuery('#e-c-r-top').offset().top ;
          if (window_top > div_top)
            jQuery('.socialbar-left').addClass('fixedsocialbar')
          else
            jQuery('.socialbar-left').removeClass('fixedsocialbar');
          }
        // If you have jQuery directly, use the following line, instead
         jQuery(function() {
        // If you have jQuery via Google AJAX Libraries
        // google.setOnLoadCallback(function() {
          jQuery(window).scroll(sticky_relocate);
          sticky_relocate();
          });

当我们到达红色页脚时,我希望“hello box”停止并停留在那里,与底部对齐(直到该人再次向上滚动,然后所有这些都应该反向发生。

如果有人可以帮我告诉我js从滚动到固定(已经在我的例子中)然后是第三个触发器底部,我已经知道将它对齐到底部的css,只需要js触发器。

我希望我已经解释过这个。

1 个答案:

答案 0 :(得分:0)

您可能不需要打扰整个固定/滚动开关。相反,让javascript限制范围的上端和下端。如果用户滚过任何一端,只需忽略这些数字并使用最小/最大值。 (您可以通过读取页面上相应元素的位置来获得最小值/最大值。)