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

Question

我的网站有一个主表单，我想将一个 div 停靠在主表单内内容区域的顶部。无论滚动位置如何，该 div 都应始终可见。这可能吗？

一张图片会更好地解释它。

Answer 1

以下解决方案对我有用：

HTML

<div class="sticky">
    ...
</div>

CSS

.sticky {
    position: sticky;
    top: 0;
    height: 100%;
}

Answer 2

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

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

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

Note #1

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

注意 #2

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

Answer 3

截至 2018 年 7 月，是时候重新审视这个问题了。 position: Sticky 正是针对像您这样的问题而引入的，并且具有不错的浏览器支持< /a>.

它的工作原理如下：

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

其中 top 是滚动时 div 应停留在视口顶部的距离。 必须指定top。其他选项，例如bottom、left或right，都可以<目前无法工作。

粘性 div 在所有方面都像普通 div 一样，除了当您滚动经过它时，它会粘在浏览器的顶部。

这里有一个 jsfiddle 给你一个想法。

Answer 4

你需要 jQuery 或类似的东西，请参阅我的小提琴 此处

编辑

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

Answer 5

我创建了一个新的小提琴，希望它有用。 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}

可能有比使用“ghost”更好的解决方案但我不知道是哪一个。

Answer 6

假设标题 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 });
    }
});

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

Answer 7

使用 CSS 来固定其位置。

假设您的

有一个 ID“topdiv”：

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

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

#contentarea { margin-top: 35px; }

检查此 < a href="http://jsfiddle.net/didierg/29VeC/" rel="nofollow">小提琴。

Answer 8

听起来您正在寻找的是一个具有两个属性的 header div：

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

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

如果您想完成所有这些，最快的方法可能涉及一些 JavaScript。
尝试这个；如果我稍后有时间，我会用更多代码更新它。

Answer 9

我相信您正在寻找向下滚动时跟随的 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/

Answer 10

你可以试试这个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;
    }

Answer 11

在此修改后的示例中，滚动时横幅 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>