blocks|key|710853|text|使用CSS确定其位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|710854|假设你的<div>有一个ID+"topdiv"：|offset|length|style|CODE|710855|#topdiv+{
++++position:+fixed;
++++top:+0;
++++left:+0
}|code-block|syntax|javascript|710856|注意:你必须为内容设置一个页边距-顶部，因为固定的div会在内容上显示：|710857|#contentarea+{+margin-top:+35px;+}|710858|检查此fiddle。|710859|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/didierg/29VeC/^0|0|4|5|0|0|0|0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Use CSS to fix its position.</p>

<p>Assuming your <code>&lt;div&gt;</code> has an ID "topdiv":</p>

<pre><code>#topdiv {
    position: fixed;
    top: 0;
    left: 0
}
</code></pre>

<p>Note you'll have to set a margin-top for the content, because the fixed div will display "over" the content:</p>

<pre><code>#contentarea { margin-top: 35px; }
</code></pre>

<p>Check this <a href="http://jsfiddle.net/didierg/29VeC/" rel="nofollow">fiddle</a>.</p>


blocks|key|710866|text|我创造了一个新的小提琴，我希望它能有用。DIV可以在页面中任意定位，并在滚动时保持可见。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|710867|http://jsfiddle.net/mM4Df/|offset|length|710868|<div+id="mydiv">
++fixed+div
</div>

<div+class="ghost">
++fixed+div
</div>|code-block|syntax|javascript|710869|CSS：|710870|#mydiv+{+position:+fixed;++background-color:Green;+float:left;+width:100%25}
.ghost{opacity:+0}|710871|也许有一个比使用“幽灵”更好的解决方案，但我不知道是哪一个。|710872|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Q|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

<p>I created a new fiddle which I hope can be useful. The DIV can be arbitrary positioned in the page and stays visible when scrolling.</p>

<p><a href="http://jsfiddle.net/mM4Df/" rel="nofollow">http://jsfiddle.net/mM4Df/</a></p>

<pre><code>&lt;div id="mydiv"&gt;
  fixed div
&lt;/div&gt;

&lt;div class="ghost"&gt;
  fixed div
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#mydiv { position: fixed;  background-color:Green; float:left; width:100%}
.ghost{opacity: 0}
</code></pre>

<p>probably there is a better solution than using a "ghost" but I do not know which.</p>


blocks|key|710909|text|假设标题div的顶部位置(屏幕顶部)在开始时为100px，可以这样做:如果窗口的滚动顶部超过100px，则将标题div设置为固定位置，顶部为0px；如果窗口的滚动顶部小于100px，则将标题div的位置设置为默认布局。对于jquery，它是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|710910|$(document).scroll(function()+{
++++if+($(this).scrollTop()+>+100)+{
++++++++$('div#header').css({+
++++++++++++"position"+:+'fixed',
++++++++++++"top"+:+0+});
++++}+else+{
++++++++$('div#header').css({+"position"+:+'relative',+"top"+:+0+});
++++}
});|code-block|syntax|javascript|710911|它是通过scroll事件实现的。|710912|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Assume the top position(to the top of the screen) of the header div is 100px in the beginning, you can do like this: 
if the scroll top of window is over 100px, set the header div to fix position with top 0px;
if the scroll top of window is less than 100px, set the position of the header div with the default layout.
With jquery, it is sth like this:</p>

<pre><code>$(document).scroll(function() {
    if ($(this).scrollTop() &gt; 100) {
        $('div#header').css({ 
            "position" : 'fixed',
            "top" : 0 });
    } else {
        $('div#header').css({ "position" : 'relative', "top" : 0 });
    }
});
</code></pre>

<p>it is implemented with the scroll event.</p>


blocks|key|710955|text|我相信你正在寻找一个当你向下滚动时跟随的div。在许多网站上的购物车上都可以看到这种实现。你可能想看看http://kitchen.net-perspective.com/open-source/scroll-follow/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|710956|另一个很好的链接是：http://jqueryfordesigners.com/fixed-floating-elements/|710957|滚动示例的一些相关集合：http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/|710958|entityMap|0|LINK|mutability|MUTABLE|url|http://kitchen.net-perspective.com/open-source/scroll-follow/|1|http://jqueryfordesigners.com/fixed-floating-elements/|2|http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/^0|1F|1P|0|0|A|1I|1|0|C|1Q|2|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|H|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]]]

<p>I believe you are looking for a div that follows when you scroll down. This implementation can be seen for shopping carts on number of sites. You may want to look at <a href="http://kitchen.net-perspective.com/open-source/scroll-follow/" rel="nofollow">http://kitchen.net-perspective.com/open-source/scroll-follow/</a> </p>

<p>Another good link is: <a href="http://jqueryfordesigners.com/fixed-floating-elements/" rel="nofollow">http://jqueryfordesigners.com/fixed-floating-elements/</a></p>

<p>Some related collection of scroll examples: <a href="http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/" rel="nofollow">http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/</a></p>


blocks|key|711071|text|我发布了一个sample作为评论，所以我想我会写出一个完整的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|711072|标记非常简单，但每个部分都有一些重要的说明。|711073|HTML|711074|<div+id="page">
++++<div+id="header">
++++++++<div+id="header-inner">+
++++++++++++<img+src="http://placehold.it/300x100"+/>
++++++++</div>
++++</div>
++++<div+id="content">
++++++++
++++</div>
</div>|code-block|syntax|javascript|711075|CSS|711076|#page+{
++++padding:+100px;
++++width:+300px;
}

#header,
#header-inner+{+/*+Note+#1+*/
++++height:+100px;
++++width:+300px;
}

.scrolling+{+/*+Note+#2+*/
++++position:+fixed;
++++top:+0;
}|711077|JavaScript|711078|//jQuery+used+for+simplicity
$(window).scroll(function(){
++$('#header-inner').toggleClass('scrolling',+$(window).scrollTop()+>+$('#header').offset().top);

++//can+be+rewritten+long+form+as:
++var+scrollPosition,+headerOffset,+isScrolling;
++scrollPosition+=+$(window).scrollTop();
++headerOffset+=+$('#header').offset().top;
++isScrolling+=+scrollPosition+>+headerOffset;
++$('#header-inner').toggleClass('scrolling',+isScrolling);
});|711079|注意#1|711080|滚动标题将使用position:+fixed附加到页面顶部，但此样式将从内容流中删除内容，这将导致内容跳转，除非其容器保持原始高度。|style|CODE|711081|注释#2|711082|样式属于CSS，但是可能很难将某些元素与其原始位置正确对齐。您可能需要通过JavaScript动态设置left或right+css属性。|711083|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/YpKTP/^0|6|6|0|0|0|0|0|0|0|0|0|0|7|F|0|0|1F|4|1K|5|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1H|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1I|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1J|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1K|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|C|$]]|$1|S|3|T|5|J|7|1M|8|@]|9|@]|C|$K|L]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|1O|8|@$A|1P|B|1Q|Y|Z]]|9|@]|C|$]]|$1|10|3|11|5|6|7|1R|8|@]|9|@]|C|$]]|$1|12|3|13|5|6|7|1S|8|@$A|1T|B|1U|Y|Z]|$A|1V|B|1W|Y|Z]]|9|@]|C|$]]|$1|14|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]]|15|$16|$5|17|18|19|C|$1A|1B]]]]

<p>I posted a <a href="http://jsfiddle.net/YpKTP/" rel="noreferrer">sample</a> as a comment, so I suppose I'll write out a full answer to this.</p>

<p>The markup is pretty straight-forward, but there are some important notes for each section.</p>

<h3>HTML</h3>

<pre><code>&lt;div id="page"&gt;
    &lt;div id="header"&gt;
        &lt;div id="header-inner"&gt; &lt;!-- Note #1 --&gt;
            &lt;img src="http://placehold.it/300x100" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
        &lt;!-- Some Content Here --&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<h3>CSS</h3>

<pre><code>#page {
    padding: 100px;
    width: 300px;
}

#header,
#header-inner { /* Note #1 */
    height: 100px;
    width: 300px;
}

.scrolling { /* Note #2 */
    position: fixed;
    top: 0;
}
</code></pre>

<h3>JavaScript</h3>

<pre><code>//jQuery used for simplicity
$(window).scroll(function(){
  $('#header-inner').toggleClass('scrolling', $(window).scrollTop() &gt; $('#header').offset().top);

  //can be rewritten long form as:
  var scrollPosition, headerOffset, isScrolling;
  scrollPosition = $(window).scrollTop();
  headerOffset = $('#header').offset().top;
  isScrolling = scrollPosition &gt; headerOffset;
  $('#header-inner').toggleClass('scrolling', isScrolling);
});
</code></pre>

<h2>Note #1</h2>

<p>The scrolling header will be attached to the top of the page using <code>position: fixed</code>, but this style will remove the content from content flow, which will cause the content to jump unless its container maintains the original height.</p>

<h2>Note #2</h2>

<p>Styles belong in CSS, however it may be difficult to properly align some elements with their original position. You may need to dynamically set the <code>left</code> or <code>right</code> css property via JavaScript.</p>


blocks|key|495749|text|你可以试试这个CSS。也许这就是你要找的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|495750|++++html,+body{
++++++++text-align:center;
++++++++margin:0px;
++++++++background:#ABCFFF;
++++++++height:100%25;
++++++++}
++++.header-cont+{
++++++++width:100%25;
++++++++position:fixed;
++++++++top:0px;
++++}
++++#header+{
++++++++height:50px;
++++++++background:#F0F0F0;
++++++++border:1px+solid+#CCC;
++++++++width:+100%25;
++++++++margin:auto;
++++}
++++.content-cont+{
++++++++width:100%25;
++++++++position:absolute;+/*+to+place+it+somewhere+on+the+screen+*/
++++++++top:60px;
++++++++bottom:60px;+/*+makes+it+lock+to+the+bottom+*/
++++++++overflow:auto;
++++}
++++#content+{
++++++++background:#F0F0F0;
++++++++border:1px+solid+#CCC;
++++++++width:960px;
++++++++position:relative;++
++++++++min-height:99.6%25;
++++++++height:auto;
++++++++overflow:+hidden;
++++++++margin:auto;++++++++++++
++++}
++++.footer-cont+{
++++++++width:100%25;
++++++++position:fixed;
++++++++bottom:0px;
++++}
++++#footer+{
++++++++height:50px;
++++++++background:#F0F0F0;
++++++++border:1px+solid+#CCC;
++++++++width:+100%25;
++++++++margin:auto;
++++}|code-block|syntax|javascript|495751|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can try this CSS. Maybe it is what you are looking for:</p>

<pre><code>    html, body{
        text-align:center;
        margin:0px;
        background:#ABCFFF;
        height:100%;
        }
    .header-cont {
        width:100%;
        position:fixed;
        top:0px;
    }
    #header {
        height:50px;
        background:#F0F0F0;
        border:1px solid #CCC;
        width: 100%;
        margin:auto;
    }
    .content-cont {
        width:100%;
        position:absolute; /* to place it somewhere on the screen */
        top:60px;
        bottom:60px; /* makes it lock to the bottom */
        overflow:auto;
    }
    #content {
        background:#F0F0F0;
        border:1px solid #CCC;
        width:960px;
        position:relative;  
        min-height:99.6%;
        height:auto;
        overflow: hidden;
        margin:auto;            
    }
    .footer-cont {
        width:100%;
        position:fixed;
        bottom:0px;
    }
    #footer {
        height:50px;
        background:#F0F0F0;
        border:1px solid #CCC;
        width: 100%;
        margin:auto;
    }
</code></pre>


blocks|key|711201|text|在这个修改过的例子中，横幅div在滚动时停留在屏幕上，也停留在容器div中。当容器div底部到达屏幕顶部时，banner+div返回到相对位置，并与容器http://jsfiddle.net/SeeTS/198/一起向上滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|711202|JQuery|711203|$(window).scroll(function()+{
t+=+$('.form').offset();
t+=+t.top;
s+=+$(window).scrollTop();
d+=+t-s;
b+=+$('.banner').height();
f+=+$('.form').height();

if+(d+<+5)+{
++++if(d+<+-(f-b)-15)
++++++++{
++++++++$('.banner').addClass('bottom');
++++++++$('.banner').removeClass('fixed');
++++++++}
++++else+{
++++++++$('.banner').addClass('fixed');
++++++++$('.banner').removeClass('bottom');
++++}
}
else+{
++++$('.banner').removeClass('fixed');

}
});|code-block|syntax|javascript|711204|CSS|711205|++++.form+{
++++position:relative;
++++width:480px;
++++margin:+100px+auto;
++++padding:10px;
}
p+{
++border:2px+dotted+#000;
}
.banner+{
++++border-radius:8px;
++++background:#660000;
++++height:100px;
++++width:60px;
}
.fixed{
++++position:fixed;
++++top:5px;
}
.bottom+{
++position:absolute;
++bottom:0px;
}|711206|HTML|711207|<table+class="form"+id="form">
++<tr>
++++<td+valign="top"+width="70px">
++++++<div+class="banner"></div>
++++</td>
++++<td>
++++<p>Cum+sociis+natoque+penatibus...</p>
++++</td>
++</tr>
</table>
<div+style="position:relative;height:500px;">
</div>|711208|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/SeeTS/198/^0|24|U|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>in this modified example banner div stays in the screen when scrolling and also stays in the container div.
when the container divs bottom reaches to the top of the screen, banner div returns to relative position and scrolls up with container
<a href="http://jsfiddle.net/SeeTS/198/" rel="nofollow">http://jsfiddle.net/SeeTS/198/</a></p>

<p>JQuery</p>

<pre><code>$(window).scroll(function() {
t = $('.form').offset();
t = t.top;
s = $(window).scrollTop();
d = t-s;
b = $('.banner').height();
f = $('.form').height();

if (d &lt; 5) {
    if(d &lt; -(f-b)-15)
        {
        $('.banner').addClass('bottom');
        $('.banner').removeClass('fixed');
        }
    else {
        $('.banner').addClass('fixed');
        $('.banner').removeClass('bottom');
    }
}
else {
    $('.banner').removeClass('fixed');

}
});
</code></pre>

<p>CSS</p>

<pre><code>    .form {
    position:relative;
    width:480px;
    margin: 100px auto;
    padding:10px;
}
p {
  border:2px dotted #000;
}
.banner {
    border-radius:8px;
    background:#660000;
    height:100px;
    width:60px;
}
.fixed{
    position:fixed;
    top:5px;
}
.bottom {
  position:absolute;
  bottom:0px;
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;table class="form" id="form"&gt;
  &lt;tr&gt;
    &lt;td valign="top" width="70px"&gt;
      &lt;div class="banner"&gt;&lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
    &lt;p&gt;Cum sociis natoque penatibus...&lt;/p&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;div style="position:relative;height:500px;"&gt;
&lt;/div&gt;
</code></pre>


blocks|key|711228|text|下面的解决方案对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|711229|HTML|offset|length|style|CODE|711230|<div+class="sticky">
++++...
</div>|code-block|syntax|javascript|711231|CSS|711232|.sticky+{
++++position:+sticky;
++++top:+0;
++++height:+100%25;
}|711233|entityMap^0|0|0|4|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>The below solution worked for me:</p>
<p><code>HTML</code></p>
<pre><code>&lt;div class=&quot;sticky&quot;&gt;
    ...
&lt;/div&gt;
</code></pre>
<p><code>CSS</code></p>
<pre><code>.sticky {
    position: sticky;
    top: 0;
    height: 100%;
}
</code></pre>


<p>I have a master form for my website, and I want to dock a div to the top of the content area inside the master form. This div should always be visible despite scroll position. Is this possible?</p>

<p>A picture would explain it better.</p>

<p><img src="https://i.stack.imgur.com/BfRBU.png" alt="enter image description here"></p>


Can I keep a DIV always on the screen, but not always in a fixed position?

容器

jQuery

我的网站有一个主窗体，我想将一个div停靠到主窗体内内容区域的顶部。无论滚动位置如何，此div都应始终可见。这个是可能的吗？一张图片可以更好地说明这一点。​​

问我可以将DIV始终显示在屏幕上，但不能总是放在固定位置吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以将DIV始终显示在屏幕上，但不能总是放在固定位置吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以将DIV始终显示在屏幕上，但不能总是放在固定位置吗？
EN