将固定div滚动到某个点

问题描述：

我已经看到了一些这些例子，但是我的情况有点不同，无法弄清楚。将固定div滚动到某个点

我正在使用在这些论坛上发现的一块jQuery，将固定div滚动到某个点然后停止，使用'scrollTop'。

var windw = this; 

$.fn.followTo = function (pos) { 
    var $this = this, 
     $window = $(windw); 

    $window.scroll(function(e){ 
     if ($window.scrollTop() > pos) { 
      $this.css({ 
       position: 'absolute', 
       top: pos 
      }); 
     } else { 
      $this.css({ 
       position: 'fixed', 
       top: 40 
      }); 
     } 
    }); 
}; 

$('#scrollto-menu-nav').followTo(250);

不过，我需要它停止当它达到从顶部的底部没有一个高度滚动。有任何想法吗？

感谢， [R

您可以尝试计算您希望它从底部停止的物品的总高度，然后从该数字中扣除以达到您希望停止的位置。例如150 - 100会给位置值50。 – KryptoniteDove 2012-04-23 11:53:08

答

你可以做这样的事情：

HTML

<img src=//ph.artsinn.de alt> 
<div> 
    <p>A short line of text, for better interpretation.</p> 
    <p>Followed by another line, filled with letter and words</p> 
</div> 

<img src=//ph.artsinn.de/240x160/666?text=scroll%20down alt id=obj> 

<img src=//ph.artsinn.de alt> 
<img src=//ph.artsinn.de alt> 
<img src=//ph.artsinn.de alt class=end> 

<div> 
    <p>A short line of text, for better interpretation.</p> 
    <p>Followed by another line, filled with letter and words</p> 
</div> 

<img src=//ph.artsinn.de alt> 
<img src=//ph.artsinn.de alt> 
<img src=//ph.artsinn.de alt> 
<img src=//ph.artsinn.de alt>

CSS

/* not needed */ 
html,body{height:200%} 
img {display:block}

$(function() { 
    var $window = $(window), 
     $sidebar = $("#obj"), 
     sidebarTop = $sidebar.position().top, 
     sidebarHeight = $sidebar.height(), 
     $footer = $(".end"), 
     footerTop = $footer.position().top; 

    $sidebar.css('position', 'fixed'); 
    $window.scroll(function(e) { 
     scrollTop = $window.scrollTop(); 
     topPosition = Math.max(0, sidebarTop - scrollTop); 
     topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight); 
     $sidebar.css('top', topPosition); 
    }); 
});

，并再次为fiddle。

将固定div滚动到某个点

相关推荐