Ответ 1

Здесь начинается. В принципе, мы копируем заголовок при загрузке, а затем проверяем (используя .scrollTop() или window.scrollY), чтобы видеть, когда пользователь прокручивается за пределы точки (например, 200 пикселей). Затем мы просто переключаем класс (в данном случае .down), который перемещает исходный код в поле зрения.

Наконец, все, что нам нужно сделать, это применить transition: top 0.2s ease-in к нашему клону, так что, когда он в состоянии .down, он переходит в режим просмотра. Dunked делает это лучше, но с небольшой игрой вокруг легко настроить

CSS

header {
  position: relative;
  width: 100%;
  height: 60px;
}

header.clone {
  position: fixed;
  top: -65px;
  left: 0;
  right: 0;
  z-index: 999;
  transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  top: 0;
}

либо Vanilla JS (polyfill по мере необходимости)

var sticky = {
  sticky_after: 200,
  init: function() {
    this.header = document.getElementsByTagName("header")[0];
    this.clone = this.header.cloneNode(true);
    this.clone.classList.add("clone");
    this.header.insertBefore(this.clone);
    this.scroll();
    this.events();
  },

  scroll: function() {
    if(window.scrollY > this.sticky_after) {
      document.body.classList.add("down");
    }
    else {
      document.body.classList.remove("down");
    }
  },

  events: function() {
    window.addEventListener("scroll", this.scroll.bind(this));
  }
};

document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

или jQuery

$(document).ready(function() {
  var $header = $("header"),
      $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
  });
});

Новые отражения

В то время как выше ответы на исходный вопрос OP "Как Dunked достигает этого эффекта?", я бы не рекомендовал этот подход. Во-первых, копирование всей верхней навигации может быть довольно дорогостоящим, и нет реальной причины, по которой мы не можем использовать оригинал (с небольшой работой).

Кроме того, Paul Irish и другие, писали о, как анимация с помощью translate() лучше, чем анимация с помощью top. Он не только более совершенен, но также означает, что вам не нужно знать точную высоту вашего элемента. Вышеупомянутое решение будет изменено с помощью (см. JSFiddle):

header.clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: 0.2s transform cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  transform: translateY(0);
}

Единственным недостатком использования преобразований является то, что пока поддержка браузера довольно хороша, вы, вероятно, захотите добавить префиксные версии поставщика, чтобы максимизировать совместимость.

Ответ 2

Вот сценарий JS http://jsfiddle.net/ke9kW/1/

Как говорят другие, установите заголовок на фиксированный и запустите его с помощью дисплея: none

затем jQuery

$(window).scroll(function () {
  if ( $(this).scrollTop() > 200 && !$('header').hasClass('open') ) {
    $('header').addClass('open');
    $('header').slideDown();
   } else if ( $(this).scrollTop() <= 200 ) {
    $('header').removeClass('open');
    $('header').slideUp();
  }
});

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

Ответ 3

Вот довольно список плагинов jQuery, которые помогут достичь аналогичного эффекта: http://jquery-plugins.net/tag/sticky-scroll

Ответ 4

Я использовал функцию jQuery.scroll() для отслеживания события прокрутки панели инструментов с помощью scrollTop. Затем я использовал условие, чтобы определить, было ли оно больше, чем значение того, что я хотел заменить. В приведенном ниже примере это были "Результаты". Если значение было истинно, тогда метка результатов добавила класс fixedSimilarLabel и новые стили были приняты во внимание.

    $('.toolbar').scroll(function (e) {
//console.info(e.currentTarget.scrollTop);
    if (e.currentTarget.scrollTop >= 130) {
        $('.results-label').addClass('fixedSimilarLabel');
    }
    else {      
        $('.results-label').removeClass('fixedSimilarLabel');
    }
});

http://codepen.io/franklynroth/pen/pjEzeK

Ответ 5

аналогичное решение с использованием jquery будет:

$(window).scroll(function () {
  $('.header').css('position','fixed');
});

Это превращает заголовок в элемент фиксированной позиции сразу же при прокрутке

Ответ 6

Добавить debouncing для эффективности http://davidwalsh.name/javascript-debounce-function

Ответ 7

CSS

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}

JS:

$(window).scroll(function() {
 if ($(this).scrollTop() > 100){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

Ответ 8

Это не работало для меня в Firefox.

Мы добавили условие, основанное на том, помещает ли код переполнение на уровне html. Смотрите Анимать scrollTop не работает в firefox.

  var $header = $("#header #menu-wrap-left"),
  $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = Array(); 
    fromTop["body"] = $("body").scrollTop();
    fromTop["html"] = $("body,html").scrollTop();

if (fromTop["body"]) 
    $('body').toggleClass("down", (fromTop["body"] > 650));

if (fromTop["html"]) 
    $('body,html').toggleClass("down", (fromTop["html"] > 650));

  });

Ответ 9

Я предлагаю использовать липкие js, у которых есть лучший вариант, который я видел. вам нечего делать только на этом js на вас

 https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js

и используйте ниже код:

<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

Его git repo: https://github.com/garand/sticky

Ответ 10

снизу окна прокрутите до верхней прокрутки с помощью jquery.

 <script> 

 var lastScroll = 0;

 $(document).ready(function($) {

 $(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });
 </script>