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

Question

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

一张图片可以更好地解释它.

Answer 1

我发布了一个评论样本,所以我想我会写出一个完整的答案.

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

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 动态设置leftor rightcss属性.

Answer 2

你需要的jQuery或类似的,看到我的小提琴这里

编辑

jQuery函数,其中.form是内容.bannerdiv,是停靠的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 3

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

它是这样工作的：

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

top滚动时 div 应停留在视口顶部的距离在哪里。指定top是强制性的。其他选项一样bottom，left或者right根本没有目前的工作。

粘性 div 在所有方面都像普通 div 一样，除非你滚动它，然后它会粘在浏览器的顶部。

这是一个jsfiddle给你一个想法。