如何实现滚动到固定效果? [英] How to implement scroll to fixed effect?

问题描述

如果您浏览网站:

http://eyeheartworld.org/pages/the-cause

然后向下滚动，我在codepen上找到了一个概念的实现(向下滚动时，导航栏会滚动并固定)

    var header = $("#guide-template");
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();
       if (scroll >= window.innerHeight) {
          header.addClass("fixed");
        } else {
          header.removeClass("fixed");
        }
});

( http://codepen.io/simpleminded/pen/noaJj )，我只是希望至少快速浏览一下首页图片的工作方式.它们滚动到顶部，然后保持固定，而其他图片则在它们上方滚动.

解决方案

基本上，它会使用:window.innerHeight查找屏幕的高度，并在滚动量大于屏幕高度时添加一个类. >

这与#introscreen高度相同，后者已通过CSS设置为100vh. 100vh基本上与100％相同(有关VH的更多信息).

因此，导航栏"始终位于用户屏幕的下方，一旦滚动了确切的数量，它将添加固定"类，该类将导航栏固定在屏幕上.如果您向后滚动，该类将再次被删除.

If you look at the website:

http://eyeheartworld.org/pages/the-cause

and scroll down, there's an implementation of a concept I found on codepen (when you scroll down, the navigation bar scrolls and is fixed)

    var header = $("#guide-template");
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();
       if (scroll >= window.innerHeight) {
          header.addClass("fixed");
        } else {
          header.removeClass("fixed");
        }
});

(http://codepen.io/simpleminded/pen/noaJj) and I just wanted a quick run through at the least of how the PICTURES on the top page are working. They scroll to the top and then stay fixed while other pictures scroll over them.

解决方案

It basically looks for the height of your screen with: window.innerHeight and adds a class when the amount scrolled is bigger than the height of your screen.

This is the same height as the #introscreen, which is set to 100vh with css. 100vh is basically the same as 100% (More on VH here).

So the 'navbar' is always just below the users' screen, and once you scroll this exact amount, it adds the class 'fixed' which fixes the navbar to the screen. If you scroll back the class gets removed again.

这篇关于如何实现滚动到固定效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！