较新的反思

Question

我在这个网站上看到了这个粘性标题： http://dunked.com/ （不再有效，view archived site）

当您向下滚动时，粘性标题从顶部向下。

我查看了代码，但看起来很复杂。我只明白这个：使用JS克隆了正常的标题，当您向下滚动页面时，它会从顶部进行动画处理。

Answer 1

<强> Here's a start 即可。基本上，我们在加载时复制标题，然后检查（使用.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和其他人written about translate()的动画效果比top的动画更好。它不仅性能更高，而且还意味着您不需要知道元素的确切高度。上述解决方案将使用以下(See 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);
}

使用转换的唯一缺点是，虽然browser support is pretty good，但您可能希望添加供应商前缀版本以最大限度地提高兼容性。

Answer 2

这是一个JS小提琴http://jsfiddle.net/ke9kW/1/

正如其他人所说，将标题设置为固定，然后使用display：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是您希望它向下移动的像素高度。添加open类是为了允许我们运行elseif而不是else，所以有些代码不会在每个scrolllevent上运行，节省了一点点内存

Answer 3

以下是 jQuery插件的列表，它将有助于达到类似的效果：http://jquery-plugins.net/tag/sticky-scroll

Answer 4

我使用jQuery .scroll（）函数使用scrollTop跟踪工具栏滚动值的事件。然后我使用条件来确定它是否大于我想要替换的值。在下面的例子中，它是“结果”。如果值为true，则results-label添加了一个类'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

Answer 5

我建议使用粘性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

Answer 6

使用jquery的类似解决方案是：

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

这会在滚动

时立即将标题转换为固定位置元素

Answer 7

添加去抖动，以提高效率http://davidwalsh.name/javascript-debounce-function

Answer 8

的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");
  }
});

Answer 9

这在Firefox中不起作用。

我们根据代码是否将溢出放在html级别添加了条件。请参阅Animate scrollTop not working in 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));

  });

Answer 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>

Answer 11

这是一个没有 jQuery 的简单解决方案，只有 Vanilla JS。

在示例中，我们只使用 "header" 类，您可以将其更改为您想要的任何其他内容。基本上，它会复制现有标题并将其显示为固定标题。

解决方案很快，因为动画是通过 CSS 过渡完成的，没有额外的 JS 动画开销。

您可以调整动画样式以获得自己的过渡效果。动画 "slidein" 用于在向下滚动时显示固定标题，"slideout" 当您希望它在向上滚动到顶部时消失。

(function() {

  //CONFIGURATION
  var headerClassName = 'header'; //Class of your header element
  var stickyAfter = 150; //Show fixed header after this Y offset in px
  
  var header = document.getElementsByClassName(headerClassName)[0];
  var clone = header.cloneNode(true); 
  clone.classList.add('clone'); 
  header.parentElement.appendChild(clone);
  
  var initializeHeader = function() {
    document
    .getElementsByClassName(headerClassName + ' clone')[0]
    .classList.add('initialized');
    return true;
  }
  
  window.onscroll = function() {
    var cl = document.body.classList;
    window.pageYOffset > stickyAfter ? 
      initializeHeader() && cl.add('sticky') : 
      cl.remove('sticky');
  } 

})();

/* GENERAL STYLES */
body {
  min-height: 2000px;
}
.header {
  background: green;
  padding: 7px 20px;
  color: #fff;
  position: relative;
  min-width: 100%;
}

/* STICKY HEADER STYLES */
@keyframes slidein {
  from {
    position: fixed;
    top: -50px;
    opacity: 0;
  }
  to {
    position: fixed;
    top: 0;
    opacity: 1;
  }
}
@keyframes slideout {
  from {
    position: fixed;
    top: 0;
    opacity: 1;
  }
  to {
    position: fixed;
    top: -50px;
    opacity: 0;
  }
}
.header.clone.initialized {
  -webkit-animation: slideout .3s forwards; /* for less modern browsers */
   animation: slideout .3s forwards;
}
body.sticky .header.clone {
  -webkit-animation: slidein .3s forwards; /* for less modern browsers */
   animation: slidein .3s forwards;
}

<div class="header">
  <p>This is demo header</p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis augue vel massa dictum gravida. Ut vitae elit ligula. In vitae sagittis lacus. Curabitur vel magna eget mauris vestibulum vestibulum id eget dui. Morbi tempus laoreet gravida. Curabitur vel volutpat lacus. Morbi dictum iaculis nibh. Praesent cursus tempor placerat. Sed posuere dui et diam elementum luctus. Nulla aliquet vestibulum justo.</p>

<p>Integer cursus tellus nec sodales lobortis. Donec dictum pharetra ligula, at lobortis lorem pellentesque non. Nullam volutpat nisi id laoreet condimentum. Morbi vel erat vitae elit sodales iaculis ac ut libero. Cras eget neque at libero feugiat interdum. Praesent eget erat mauris. Maecenas convallis aliquet risus non tempus.</p>

<p>Sed convallis elit a dignissim vestibulum. Quisque pharetra, leo eu eleifend pretium, dolor enim viverra elit, quis aliquet dui lacus sit amet dolor. Quisque sit amet sapien tellus. Nam tristique placerat dui, placerat fringilla magna varius nec. Ut id arcu metus. Aenean eu mollis massa. Vestibulum cursus egestas turpis, a tempor metus mattis eu. Donec fringilla quam non fermentum fringilla.</p>

<p>Nam et lorem leo. Donec libero tortor, laoreet quis maximus at, faucibus fermentum ligula. Curabitur facilisis quam in posuere suscipit. Ut sagittis mauris ullamcorper, feugiat sem sed, egestas lorem. Curabitur ut urna laoreet, commodo dolor id, blandit arcu. Aliquam vitae odio magna. Curabitur eu mi dolor. Praesent tellus lectus, mattis eu nunc ac, sagittis tincidunt nulla.</p>

<p>Morbi augue erat, consectetur non pulvinar et, auctor id mi. Vestibulum a ornare diam, nec dignissim neque. Aliquam sodales orci vitae lorem rhoncus, cursus fermentum nisl hendrerit. Aliquam erat volutpat. Mauris fermentum cursus arcu, in imperdiet lacus ultrices ut. Vivamus ligula nulla, mollis a consequat id, varius sed odio. Proin sed fringilla nunc, at dignissim ipsum. Etiam dictum tortor turpis, ac ornare purus semper non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a urna vitae metus vestibulum tincidunt sed gravida metus. Vivamus auctor sed leo eget lacinia. Nulla quis bibendum erat. Nunc dapibus lobortis odio, vel porttitor dui elementum at. Ut neque libero, rutrum vel cursus id, rhoncus vitae felis.</p>

滚动下来后粘滞的标题

11 个答案:

较新的反思