jquery - 使用 JQuery 在页面滚动时精确定位元素

Question

我在 div 中有一个窄而长的图像轮播，它位于页眉和顶部菜单栏下方的页面右侧。 如果我的页面有很多内容并且比图像的高度长得多，我希望图像按以下方式定位:

• 页面上的相对或绝对位置，直到图像顶部距窗口顶部 10px
• 固定位置，以便在阅读主页内容时保持可见。
• 到达页面底部后的相对或绝对位置，以便 div 占据页脚上方与页面其余部分对齐的位置。如果 div 与页脚冲突，则不应有很大的差距。

我已经尝试了很多变体来查看位置变量，例如:

jQuery(document).ready(function(){  
     $(window).scroll(function () {  

 var y = $('#rightbackground').offset().top - $(window).scrollTop();
 var z = $(document).Height - $('#rightbackground').offset().top - $('#rightbackground').Height();

   if (y < 10 && z > 0) {$('#rightbackground').removeClass('content-stay2');  
            $('#rightbackground').addClass('content-scroll2');  

        } 

        else {  
            $('#rightbackground').addClass('content-stay2');  
            $('#rightbackground').removeClass('content-scroll2');  
        }  
    });       

}); 

却得不到我想要的效果。

HTML(来自评论):

<div id="rightbackgroundcontainer"> 
  <div id="rightbackground"> 
    <div id="mainright"> 
      <div id="comslider_in_point_53815"></div> 
<script type="text/javascript"> 
  var oCOMScript53815=document.createElement('script');     
  oCOMScript53815.src="comslider53815/comsliderd.js?timestamp=1381081498"; 
  oCOMScript53815.type='text/javascript'; 
  document.getElementsByTagName("head").item(0).appendChild(oCOMScript53815); 
</script> 
      <div id="bottomrighttxt"> 
        <h2><span class="greytext">Industry News</span></h2> 
      </div>
    </div> 
  </div> 
</div>

CSS(也来自评论):

.content-stay2 {position: relative; } 
.content-scroll2 { 
  position: fixed; 
  float: left; 
  margin-left: 642px; 
  margin-top: -300px;
}

谢谢

Answer 1

您想要的粗略解决方案如下。与其尝试在页面上定位您的对象，不如在您的 HTML 中放置两个 anchor :

<a id='top'></a> // at top of the page right before your object
<a id='bottom'></a> // before the page footer

然后您的 jQuery 函数将根据您放置在页面上的两个静态 anchor 的位置来定位您的对象。这是函数:

$(window).scroll(function(){
    var top = $('#top').position().top()-10;
    var bottom = $('#bottom').position().top();
    var bottom_of_object = $('#rightbackground').position().top + 
        $('#rightbackground').height();
if (bottom <= bottom_of_object) // //when object hits footer
    {
        //your CSS to position it above footer anyway you want
        });
    } else if (top <= 0) //when object hits  the top of the window
    {
       $('#rightbackground').css({
        'position':'fixed',
         'top': '10px'
         })
    } else { // when the page scrolled to the top
       // your default CSS rules for your object
    }
})

并检查这些 anchor 相对于用户视角的位置。基于此，您可以按照您想要的方式定位您的元素。