滚动到某个点后垂直定位DIV

我正在尝试为博客文章制作一个垂直的社交分享按钮。

我想在滚动到某一点后修复“share_DIV”位置。

• 因为“Share_DIV”不应出现在标题区域，它的位置将是绝对的并由jQuery计算，让它在*the header*和*the title* ，然后当你向下滚动并到达文本正文“share_DIV”时“当你向下滚动到文本正文的末尾时，应该开始与你同行。

所以share_DIV应该在scroll事件上垂直移动，只在START POINT – > END POINT之间

share_DIV在小提琴代码中有类.vertical-container 。

小提琴示例将准确解释我需要什么。

我怎样才能用jQuery完成它？

Answer 1

也许这就是你想要的： 小提琴

基本上，您需要使用捕获scroll event

 $(window).on("scroll", function() { ... }); 

然后检查当前scroll position是否大于.content的position ，并且不大于由其height添加的.content位置

以下是有关如何执行此操作的完整代码：

 $(function() { var top = $(".content").offset().top; var btm = top + $(".content").outerHeight(true); var $shareContainer = $(".vertical-container"); var shareHeight = $shareContainer.outerHeight(); $shareContainer.css('top', top + "px"); $(window).on("scroll", function() { //console.log($(this).scrollTop()); var scrollPosition = $(this).scrollTop(); if (scrollPosition > top && scrollPosition + shareHeight < btm) { $shareContainer.css('top', scrollPosition + "px"); } else if (scrollPosition < top) { $shareContainer.css('top', top + "px"); } else { $shareContainer.css('top', btm - shareHeight + "px"); } }); }); 

 html { margin: 0 49px; } .header { height: 200px; background: url(http://sofzh.miximages.com/jquery/custom-web-design.jpg); background-repeat: no-repeat; background-size: 100% 100%; } .panel { border-radius: 4px; border: 1px solid gray; height: 1000px; width: 100%; } p { margin: 0; font-weight: bold; border-bottom: 1px solid red; } .title { background-color: cyan; height: 60px; text-align: center; padding-top: 15px; } .content { padding: 15px 60px 15px 15px; } .vertical-container { color: white; font-size: 14px; position: absolute; right: 45px; top: 15px; min-height: 200px; background-color: #3B5998; width: 60px; } .vertical-container:after { content: ' '; position: absolute; width: 0; height: 0; top: 100%; border-style: solid; border-width: 5px 5px; right: 0px; border-color: #23355B transparent transparent #23355B; } 

  
 
 
 
SOME TITLE
 
 
START POINT
 Performed suspicion in certainty so frankness by attention pretended. Newspaper or in tolerably education enjoyment. Extremity excellent certainty discourse sincerity no he so resembled. Joy house worse arise total boy but. Elderly up chicken do at feeling is. Like seen drew no make fond at on rent. Behaviour extremely her explained situation yet september gentleman are who. Is thought or pointed hearing he. Rendered her for put improved concerns his. Ladies bed wisdom theirs mrs men months set. Everything so dispatched as it increasing pianoforte. Hearing now saw perhaps minutes herself his. Of instantly excellent therefore difficult he northward. Joy green but least marry rapid quiet but. Way devonshire introduced expression saw travelling affronting. Her and effects affixed pretend account ten natural. Need eat week even yet that. Incommode delighted he resolving sportsmen do in listening. 
END POINT
 
 
SHARE container
  

Answer 2

这里是：

http://jsfiddle.net/h5t7pgfb/76/

CSS：

 .vertical-container{ color: white; font-size:14px; position: absolute; right: 45px; top:15px; min-height: 200px; background-color: #3B5998; width: 60px; } .vertical-container:after{ content: ' '; position: absolute; width: 0; height: 0; top: 100%; border-style: solid; border-width: 5px 5px; right: 0px; border-color: #23355B transparent transparent #23355B; } 

jQuery的：

 var totalHeight = $(".header").height()+$(".title").height() + 25; $(".vertical-container").css('top', totalHeight + "px"); var stickyTop = $('.vertical-container').offset().top; // returns number $(window).scroll(function(){ // scroll event var windowTop = $(window).scrollTop(); // returns number if (stickyTop < windowTop) { $('.vertical-container').css({ position: 'fixed', top: 0 }); } else { $('.vertical-container').css({position: 'absolute', top: totalHeight }); } });