5

我不确定这是否可以用纯 CSS 来完成，或者我是否需要使用一些 jQuery 来做到这一点。

我有一个 div (product_image)，在其当前状态下，它位于距顶部约 400 像素并相对定位，因此它清除顶部菜单和标题，我需要做的是当用户向下滚动并从顶部到达约 20 像素时的 div，我需要 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>

和 CSS

.product_image {
    position: relative;
    float: left;
    width: 450px;
    margin-left: 10px;
    margin-top: 10px;
}

.product_image_fixed {
    position: fixed;
    float: left;
}

我希望我的问题已经足够清楚了，我似乎无法找到解决这个问题的方法，所以我提前感谢您的帮助！

4

1 回答 1

12

习惯了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>

演示

更多关于

于 2013-04-25T12:53:02.920 回答