如何在滚动上修复标题

Question

我正在创建一个标题,一旦滚动到一定数量的像素,它就会修复并保持原位.

我可以使用css和html这样做,还是我也需要jquery？

我已经创建了一个演示,所以你可以理解.任何帮助都会很棒!

http://jsfiddle.net/gxRC9/4/

body{
    margin:0px;
    padding:0px;
}
.clear{
    clear:both;
}
.container{
    height:2000px;
}
.cover-photo-container{
width:700px;
height: 348px;
margin-bottom: 20px;
background-color:red;
}

.small-box{
    width:163px;
    height:100px;
    border:1px solid blue;
    float:left;
}

.sticky-header{
    width:700px;
    height:50px;
    background:orange;
    postion:fixed;
}

Answer 1

你需要一些JS来做滚动事件.执行此操作的最佳方法是为固定位置设置一个新的CSS类,当滚动超过某个点时,该类将被分配给相关的div.

HTML

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

CSS

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; }

jQuery的

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

示例小提琴:http://jsfiddle.net/gxRC9/501/

编辑:扩展示例

如果触发点未知但是应该在粘性元素到达屏幕顶部时,offset().top可以使用.

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

扩展示例小提琴:http://jsfiddle.net/gxRC9/502/

Answer 2

我修改了Coop的答案.请查看示例FIDDLE 这是我的编辑:

$(window).scroll(function(){
  if ($(window).scrollTop() >= 330) {
    $('.sticky-header').addClass('fixed');
   }
   else {
    $('.sticky-header').removeClass('fixed');
   }
});

Answer 3

我知道Coop已经回答了这个问题,但这里有一个版本,它也跟踪div在文档中的位置,而不是依赖于静态值:

http://jsfiddle.net/gxRC9/16/

使用Javascript

var offset = $( ".sticky-header" ).offset();
var sticky = document.getElementById("sticky-header")

$(window).scroll(function() {

    if ( $('body').scrollTop() > offset.top){
        $('.sticky-header').addClass('fixed');
    } else {
         $('.sticky-header').removeClass('fixed');
    } 

});

CSS

.fixed{
     position: fixed;
    top: 0px;
}

Answer 4

Coop的答案很棒.
但是它依赖于jQuery,这是一个没有依赖关系的版本:

HTML

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

CSS

.sticky {
  width: 100%
}

.fixed {
  position: fixed;
  top:0;
}

JS
(这使用eyelidlessness的答案来查找Vanilla JS中的偏移量.)

function findOffset(element) {
  var top = 0, left = 0;

  do {
    top += element.offsetTop  || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while(element);

  return {
    top: top,
    left: left
  };
}

window.onload = function () {
  var stickyHeader = document.getElementById('sticky');
  var headerOffset = findOffset(stickyHeader);

  window.onscroll = function() {
    // body.scrollTop is deprecated and no longer available on Firefox
    var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    if (bodyScrollTop > headerOffset.top) {
      stickyHeader.classList.add('fixed');
    } else {
      stickyHeader.classList.remove('fixed');
    }
  };
};

例

https://jsbin.com/walabebita/edit?html,css,js,output

Answer 5

仅使用 CSS 即可完成

.sticky-header {
  position: sticky;
  top: 0;
  background: orange;
}

.sticky-header {
  position: sticky;
  top: 0;
  background: orange;
}

body {
  margin: 0px;
  padding: 0px;
}

.clear {
  clear: both;
}

.container {
  height: 2000px;
}

.cover-photo-container {
  width: 700px;
  height: 100px;
  margin-bottom: 20px;
  background-color: red;
}

.small-box {
  width: 163px;
  height: 100px;
  border: 1px solid blue;
  float: left;
}

.sticky-header {
  position: sticky;
  top: 0;
  background: orange;
}

Answer 6

只是建立在Rich的答案上,它使用了偏移量.

我将其修改如下:

• $sticky在Rich的例子中没有必要使用var ,它没有做任何事情

• 我已经将偏移检查移动到一个单独的函数中,并在文档就绪和滚动时调用它,因此如果页面在页面中间向下滚动刷新,它会直接调整大小而不必等待滚动触发

  jQuery(document).ready(function($){
      var offset = $( "#header" ).offset();
      checkOffset();
  
      $(window).scroll(function() {
          checkOffset();
      });
  
      function checkOffset() {
          if ( $(document).scrollTop() > offset.top){
              $('#header').addClass('fixed');
          } else {
              $('#header').removeClass('fixed');
          } 
      }
  
  });
  

Answer 7

Coops答案是一个很好的简单解决方案，但是，一旦您应用了固定的类，页面就会变得更短，内容将“跳转”，并且如果页面的长度是滚动距离小于标题高度的长度元素，它似乎会跳转并且不会让您看到页面底部。

我发现的答案是在将要固定的元素（本例中为nav元素）上方添加spacer div，并将其设置为与nav元素相同的高度，并将其设置为不显示。

将.fixed类添加到导航时，显示.nav-spacer div，将其删除时将其隐藏。由于页面的高度会立即更改，因此我将持续时间设置为0。

的HTML

<header>the element above the element that will become fixed</header>
<div class="nav-spacer"></div>
<nav></nav>

的CSS

nav {
    position: relative;    
    height: 100px;
}
.nav-spacer{
    position: relative;
    height: 100px;
    display: none;
}
.fixed {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    /* I like to add a shadow on to the fixed element */
    -webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
}

的JavaScript

var stickyOffset = $('nav').offset().top;

$(window).scroll(function(){
    if ($(window).scrollTop() >= stickyOffset){
        $('nav').addClass('fixed');
        //this makes the page length equal to what it was before fixing nav
        $('.nav-spacer').show(0); 
    }
    else {
        $('nav').removeClass('fixed');
        $('.nav-spacer').hide(0);
    }
});

Answer 8

辉煌的纯HTML / CSS解决方案

在2019年使用CSS3，您完全不需要Javascript就可以做到这一点。我经常这样制作粘性标头：

body {
  overflow-y: auto;
  margin: 0;
}

header {
  position: sticky; /* Allocates space for the element, but moves it with you when you scroll */
  top: 0; /* specifies the start position for the sticky behavior - 0 is pretty common */
  width: 100%;
  padding: 5px 0 5px 15px;
  color: white;
  background-color: #337AB7;
  margin: 0;
}

h1 {
  margin: 0;
}

div.big {
  width: 100%;
  min-height: 150vh;
  background-color: #1ABB9C;
  padding: 10px;
}

<body>
<header><h1>Testquest</h1></header>
<div class="big">Just something big enough to scroll on</div>
</body>