我可以将DIV始终保留在屏幕上，但并不总是处于固定位置吗？

时间：2011-12-07 16:15:48

标签： css html css-float

我的网站有一个主表单，我想将div停靠在主表单内部区域的顶部。尽管滚动位置，此div仍应始终可见。这可能吗？

图片可以更好地解释它。

enter image description here

10 个答案:

答案 0 :(得分：17)

我发布了sample作为评论，所以我想我会写出一个完整的答案。

标记很简单，但每个部分都有一些重要的注释。

HTML 

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

CSS 

#page {
    padding: 100px;
    width: 300px;
}

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

.scrolling { /* Note #2 */
    position: fixed;
    top: 0;
}

的JavaScript 

//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);
});

注意＃1

滚动标题将使用position: fixed附加到页面顶部，但此样式将从内容流中删除内容，这将导致内容跳转，除非其容器保持原始高度。

注意＃2

样式属于CSS，但是可能很难将某些元素与其原始位置正确对齐。您可能需要通过JavaScript动态设置left或right css属性。

答案 1 :(得分：8)

你需要jQuery之类的东西，请看我的小提琴here

修改

jQuery函数，其中.form是内容div，.banner是停靠的div 

$(window).scroll(function() {
    t = $('.form').offset();
    t = t.top;

    s = $(window).scrollTop();

    d = t-s;

    if (d < 0) {
        $('.banner').addClass('fixed');
        $('.banner').addClass('paddingTop');
    } else {
        $('.banner').removeClass('fixed');
        $('.banner').removeClass('paddingTop');
    }
});

.fixed {
    position:fixed;
    top:0px;
}
.paddingTop{
    padding-top:110px;
}

答案 2 :(得分：3)

我创造了一个新的小提琴，我希望它有用。 DIV可以在页面中任意定位，并在滚动时保持可见。

http://jsfiddle.net/mM4Df/ 

<div id="mydiv">
  fixed div
</div>

<div class="ghost">
  fixed div
</div>

CSS：

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

可能有比使用“幽灵”更好的解决方案，但我不知道哪个。

答案 3 :(得分：3)

假设标题div的顶部位置（到屏幕顶部）开头是100px，你可以这样做： 如果窗口的滚动顶部超过100px，则将标题div设置为固定位置，顶部为0px; 如果窗口的滚动顶部小于100px，请使用默认布局设置标题div的位置。 使用jquery，它是这样的：

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

它是通过滚动事件实现的。

答案 4 :(得分：2)

截至2018年7月，是时候重新讨论此问题。 position: sticky正是针对您的问题而引入的，它具有decent browser support。

它是这样的：

<div style="position: sticky; top: 0;"> Header </div>

其中top是到滚动时div应该停留的视口顶部的距离。 必须指定top。 bottom，left或right之类的其他选项目前无法正常工作。 >

粘性div在所有方面都会像普通div一样起作用，除非您滚动过去，然后它会停留在浏览器顶部。

这里有一个jsfiddle，可以给您一个想法。

答案 5 :(得分：0)

使用CSS来确定其位置。

假设您的<div>有ID“topdiv”：

#topdiv {
    position: fixed;
    top: 0;
    left: 0
}

请注意，您必须为内容设置margin-top，因为固定div将显示“覆盖”内容：

#contentarea { margin-top: 35px; }

选中fiddle。

答案 6 :(得分：0)

听起来你正在寻找的是一个带有两个属性的标题div：

  1. 当它通常可见时，它会保持默认位置。
  2. 当它通常不可见时，它会出现在屏幕的顶部。

    3. 简而言之，有点像“max-top”（它不作为css属性存在）。

    如果你想做所有这些，最快的方法可能涉及一些JavaScript。 试试this;如果我稍后会花一些时间，我会用更多代码更新它。

答案 7 :(得分：0)

我相信当你向下滚动时，你正在寻找一个div。对于多个站点的购物车，可以看到此实现。您可能需要查看http://kitchen.net-perspective.com/open-source/scroll-follow/

另一个好的链接是：http://jqueryfordesigners.com/fixed-floating-elements/

一些相关的滚动示例集合：http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/

答案 8 :(得分：0)

你可以尝试这个CSS。也许这就是你要找的东西：

    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;
    }

答案 9 :(得分：0)

在此修改示例中，横幅div在滚动时停留在屏幕中，并且也保留在容器div中。 当容器div底部到达屏幕顶部时，banner div返回相对位置并向上滚动容器 http://jsfiddle.net/SeeTS/198/

JQuery的

$(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');

}
});

CSS 

    .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;
}

HTML 

<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>
相关问题
最新问题