滚动后的Div（不是位置：固定） [英] Div that follows scroll (not position:fixed)

问题描述

我发现它在某个时候之前，现在我不能。我想在苹果商店找到类似购物车的东西，它的div不是绝对的，也不是固定的，例如，我们说它在屏幕的中心，只有当你向下滚动它，滚动只到不消失，当它到达浏览器头部的边框...

我不知道如果我清楚。我已经搜索，但我发现的是css位置固定的东西。

你能帮我一个链接或什么吗？

最好的问候

解决方案

应用商店使用以下css：

  div.cto div.slider-content {
 height：100％; 
 overflow：visible; 
 padding-bottom：20px; 
 position：absolute; 
右：0; 
 top：-10px; 
 width：169px; 
} 
 
 div.cto div.pinned_top div＃secondary {
 position：absolute; top：0; right：0; 
} 
 
 div.cto div.floating div＃secondary {
 position：fixed; top：0; 
} 
  

使用javascript，div的类从'pinned_top'

• 要确定滚动像素的数量： $（'html'）。scrollTop（）


• 要监听滚动事件：http://api.jquery.com/scroll/

I found it sometime ago and now I can't. I want to find something like the shopping cart at the apple store, it's a div thats not positioned absolute nor fixed, for instance, let's say it's at the center of the screen, and only when you scroll down it follows the scroll only to not disappear, when it reaches the border of the browser header...

I'm not sure If i'm being clear. I've searched but all I found is the css position fixed stuff.

Can you help me with a link or something?

Best Regards

解决方案

The app store uses the following css:

div.cto div.slider-content {
    height: 100%;
    overflow: visible;
    padding-bottom: 20px;
    position: absolute;
    right: 0;
    top: -10px;
    width: 169px;
}

div.cto div.pinned_top div#secondary {
    position:absolute;top:0;right:0;
}

div.cto div.floating div#secondary {
    position:fixed;top:0;
}

Using javascript, the class of the div is changed from 'pinned_top' to 'floating' when you scroll down.

About the javascript:

• To determine the number of pixels scrolled: $('html').scrollTop()
• To listen to scroll events: http://api.jquery.com/scroll/

这篇关于滚动后的Div（不是位置：固定）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！