我能否让一个DIV始终在屏幕上，但不总是在一个固定的位置？[英] Can I keep a DIV always on the screen, but not always in a fixed position?

问题描述

我为我的网站提供了主表单，我想将一个Div停靠到主表单中内容区域的顶部.尽管滚动位置，该div始终应始终可见.这可能吗?

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

推荐答案

我发布了示例作为评论回答这个.

标记非常简单，但是每个部分都有一些重要的说明.

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属性.

其他推荐答案

您需要jQuery或类似的东西，请参阅我的小提琴在这里

编辑

jQuery函数，其中.form是内容div，而.banner是div dived

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

其他推荐答案

截至2018年7月，该重新审视此问题了. position: sticky完全是出于您的问题而引入的，并具有不错的浏览器支持.

它是这样的工作:

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

其中top是滚动时DIV应保持在视口顶部的距离. 指定top是强制性的.其他选项，例如bottom，left或right do not 当前工作.

粘性div将以所有的方式行事，除非您滚动经过它，

这是 jsfiddle 给您一个想法.

本文地址：https://www.itbaoku.cn/post/570267.html