Как исправить заголовок в прокрутке

Ответ 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/

EDIT: расширенный пример

Если триггерная точка неизвестна, но должна быть всякий раз, когда липкий элемент достигает вершины экрана, можно использовать 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/

Ответ 2

Я изменил ответ Купера. Посмотрите пример FIDDLE Здесь мои изменения:

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

Ответ 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;
}

Ответ 4

Ответ Куба отличный.
Однако это зависит от jQuery, вот версия, которая не имеет зависимостей:

HTML

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

CSS

.sticky {
  width: 100%
}

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

JS
(Это использует ответ на веки для нахождения смещений в 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

Ответ 5

Просто построим Богатый ответ, в котором используется смещение.

Я изменил это следующим образом:

• В Rich примере не было необходимости в var $sticky, ничего не делалось

• Я переместил проверку смещения в отдельную функцию и назвал ее на документе готов, а также на прокрутке, поэтому, если страница обновится с помощью прокрутка на полпути вниз по странице, она изменяется без изменений, не дожидаясь триггера прокрутки.

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

Ответ 6

Ответ Coops - хорошее, простое решение, однако, как только вы применяете фиксированный класс, страница становится намного короче, и контент будет "прыгать" вверх, а если страница имеет длину, где расстояние прокрутки меньше высоты элемента заголовка, он, кажется, будет прыгать и не позволит вам увидеть нижнюю часть страницы.

Ответ, который я нашел, заключался в том, чтобы добавить разделитель div над элементом, который станет фиксированным (элемент nav в моем случае), и установить его на ту же высоту, что и элемент nav, и установить его для отображения none.

При добавлении класса .fixed в навигатор, покажите div.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);
    }
});

Ответ 7

 $(document).ready(function(){

    var div=$('#header');
    var start=$(div).offset().top;

    $.event.add(window,'scroll',function(){
        var p=$(window).scrollTop();
        $(div).css('position',(p>start)?'fixed':'static');
        $(div).css('top',(p>start)?'0px':'');

    }); 
});

Он отлично работает.

Ответ 8

Выбранное решение плохо помещалось на моей странице. Так что это более продвинутая версия, которая работает с загрузкой.

javascript

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

$(window).scroll(function () {
    var sticky = $('.sticky-header'),
        scroll = $(window).scrollTop(),
        header = $('.fixed-header-background');
    sticky.each(function() {
        var left = $(this).offset().left;
        $(this).data('left', left);//I store the left offset
    });

    if (scroll >= stickyOffset) {
        sticky.addClass('fixed');
        header.css('display', 'block');
        sticky.each(function() {
            $(this).css('left', $(this).data('left'));//I set the left offset
        });
    } else {
        sticky.removeClass('fixed');
        header.css('display', 'none');
        sticky.each(function () {
            $(this).css('left', '');//I remove the left offset
        });
    }
});

CSS

.fixed-header-background {
    display: none;
     position: fixed;
    top: 50px;
    width: 100%;
    height: 30px;
    background-color: #fff;
    z-index: 5;
    border-bottom-style: solid;
    border-bottom-color: #dedede;
    border-bottom-width: 2px;
}

.fixed{
     position: fixed;
    top: 52px;
    z-index: 6;
}

И HTML

    <div class="fixed-header-background"></div>
<table class="table table-hover table-condensed">
        <thead>
            <tr>
                <th></th>
                <th><span class="sticky-header">My header 1</span></th>
                <th><span class="sticky-header">My header 2</span></th>
            </tr>
        </thead>
        <tbody>
[....]

        </tbody>
    </table>

Ответ 9

Или просто добавьте тег span с высотой фиксированного заголовка, заданной как его высоту, затем вставьте его рядом с липким заголовком:

$(function() {
  var $span_height = $('.fixed-header').height;
  var $span_tag = '<span style="display:block; height:' + $span_height + 'px"></span>';

  $('.fixed-header').after($span_tag);
});

Ответ 10

Надеюсь, эта часть альтернативного решения будет столь же ценна для кого-то, как для меня.

<Б > Ситуация:
На странице HTML5 у меня было меню, которое было элементом навигации внутри заголовка (не заголовком, а заголовком в другом элементе).
Я хотел, чтобы навигационная система придерживалась вершины, как только пользователь прокручивал ее, но до этого заголовок был абсолютно позиционирован (так что я мог бы немного наложить что-то еще).
Вышеупомянутые решения никогда не приводили к изменению, потому что .offsetTop не собирался меняться, поскольку это был элемент с абсолютным позиционированием. Кроме того, свойство .scrollTop было просто вершиной верхнего элемента..., то есть 0 и всегда было бы 0.
Любые тесты, которые я выполнил, используя эти два (и то же самое с результатами getBoundingClientRect), не сказали бы мне, что верхняя часть навигационной панели когда-либо прокручивалась до верхней части просматриваемой страницы (опять же, как сообщалось на консоли, они просто оставались одинаковыми числами при прокрутке произошло).

Решение
Решение для меня использовало

window.visualViewport.pageTop

Значение свойства pageTop отражает видимый раздел экрана, поэтому позволяет отслеживать, где элемент относится к границам области просмотра.
Это позволило простую функцию, назначаемую событию прокрутки окна, чтобы определить, когда верхняя часть панели навигации пересекается с верхней частью области видимости и применяет стилирование, чтобы заставить ее придерживаться вершины.

Возможно, нет необходимости говорить, что в любое время, когда я занимаюсь прокруткой, я ожидаю использовать это решение для программного реагирования на перемещение прокручиваемых элементов.
Надеюсь, это поможет кому-то другому.