Jquery 需要修复滚动时从顶部保持20px的div_Jquery_Html_Css

Jquery 需要修复滚动时从顶部保持20px的div

jquery html css

Jquery 需要修复滚动时从顶部保持20px的div,jquery,html,css,Jquery,Html,Css,我不确定这是否可以用纯CSS来完成，或者是否需要使用jQuery来完成我有一个div（product_image），在当前状态下，它位于距离顶部约400px的位置，并相对定位，因此它会清除顶部菜单和标题，我需要做的是，当用户向下滚动并从div顶部到达约20px时，我需要将div固定这是我尝试过的，我有一个相对定位的主div，然后我有另一个div，它用固定的定位来包装里面的所有东西。问题是div从顶部一直保持在400px 代码如下： <div class="product_image"&

我不确定这是否可以用纯CSS来完成，或者是否需要使用jQuery来完成

我有一个div（product_image），在当前状态下，它位于距离顶部约400px的位置，并相对定位，因此它会清除顶部菜单和标题，我需要做的是，当用户向下滚动并从div顶部到达约20px时，我需要将div固定

这是我尝试过的，我有一个相对定位的主div，然后我有另一个div，它用固定的定位来包装里面的所有东西。问题是div从顶部一直保持在400px

代码如下：

<div class="product_image">
    <div class="product_image_fixed">
    <a href="products/1.jpg" class="zoom" title="A bed!" rel="gal1">  
        <img src="products/1.jpg" width="450" alt="" title="A bed!">  
    </a>

    <ul id="thumblist" class="clearfix" >
        <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'products/1.jpg',largeimage: 'products/1.jpg'}"><img src='products/1.jpg' width="150" height="100"></a></li>
        <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'products/1a.jpg',largeimage: 'products/1a.jpg'}"><img src='products/1a.jpg' width="150" height="100"></a></li>    </ul>
    </div>
    </div>

我希望我已经把问题讲清楚了，我似乎找不到解决这个问题的办法，所以我提前感谢你的帮助

用于jquery

Jquery

$(document).ready(function() {
    var s = $("#sticker");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});

Css

div#wrapper {
    margin:0 auto;
    width:500px;
    background:#FFF;
}
div#mainContent {
    width:160px;
    padding:20px;
    float:left;
}
div#sideBar {
    width:130px;
    padding:20px;
    margin-left:30px;
    float:left;
}
.clear { 
    clear:both; 
}
div#sticker {
    padding:20px;
    margin:20px 0;
    background:#AAA;
    width:190px;
}
.stick {
    position:fixed;
    top:0px;
}

HTML

<div id="wrapper">
  <div id="mainContent">
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
  </div>
  <div id="sideBar">Some content here 
    <!--Some content in your right column/sidebar-->
    <div id="sticker">...This is scroll here </div>
  </div>
  <div class="clear"></div>
</div>


这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容

这里有一些内容
…这是卷轴

莫菲斯是对的。css除了hover或selected之外，无法生成dinamyc内容。@Morpheus感谢您的评论，所以我需要看看如何使用jQuery实现这一点？纯css无法实现这一点。是的，用jQuery或Javascript试试这个jQuery插件：@Daniel谢谢我会查出来的：-）我刚刚用过，这正是我想要的。但我在上面发现了一个小虫子。返回顶部时，如何删除“stick”类？

<div id="wrapper">
  <div id="mainContent">
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
      some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
       some content here <br />
  </div>
  <div id="sideBar">Some content here 
    <!--Some content in your right column/sidebar-->
    <div id="sticker">...This is scroll here </div>
  </div>
  <div class="clear"></div>
</div>