Javascript Skrollr-粘性导航条不粘性_Javascript_Css_Skrollr

Javascript Skrollr-粘性导航条不粘性

javascript css

Javascript Skrollr-粘性导航条不粘性,javascript,css,skrollr,Javascript,Css,Skrollr,我使用Skrollr在滚动页面时监视事件我想制作一个导航栏，它最初位于页面的中间当用户滚动导航栏，直到导航栏接触到视口的顶部时，导航栏变为position:fixed，并保持在顶部。但是导航栏不起作用另外，它必须在手机上运行，所以所有内容都应该放在#skrollr body 小提琴在这里：编辑：为了更好地说明问题，下面是完整的代码。我在iPhone上运行它，然后就卡住了 <!DOCTYPE html> <html> <head>

我使用

Skrollr

在滚动页面时监视事件

我想制作一个导航栏，它最初位于页面的中间

当用户滚动导航栏，直到导航栏接触到视口的顶部时，导航栏变为

position:fixed

，并保持在顶部。但是导航栏不起作用

另外，它必须在手机上运行，所以所有内容都应该放在

#skrollr body

小提琴在这里：

编辑：为了更好地说明问题，下面是完整的代码。我在iPhone上运行它，然后就卡住了

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="//rawgithub.com/Prinzhorn/skrollr/master/dist/skrollr.min.js"></script>
        <style>
            .header{width: 100%; height: 40px; background: black;}

        </style>
    </head>
    <body>
        <div id="skrollr-body">
        <div class="huge-div">
            spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br></div>

        <div class="header" data-0="position: static;" data-top="position: fixed; top:!0;"></div>    
                spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br><br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br><br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>spacer<br>

        <!-- div below is working -->
        <div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-bottom="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);" class="skrollable skrollable-between" style="background-color: rgb(0, 0, 255); -webkit-transform: rotate(0deg);">WOOOT</div>

        </div>

        <script>
            skrollr.init()
        </script>
    </body>
</html>


.header{宽度：100%；高度：40px；背景：黑色；}
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈
间隔垫圈

间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔
间隔棒
间隔棒
间隔棒
间隔棒
间隔棒
间隔棒
间隔棒
间隔棒

沃特
skrollr.init（）

我不明白你说的演示是什么意思。当我向下滚动，导航栏接触顶部时，它保持固定并滚动，我想这就是您试图实现的目标。如果我错了，请澄清你的问题。是的，它在桌面上工作。。。但在移动电话上，它不起作用：（如果你在Chrome中使用iPhone emulator，你将能够复制问题

位置：修复了使用CSS格式的元素内部不起作用的问题（skrollr body在移动电话上就是这样做的）。没有直接的解决方案。例如，您可以使用两个元素，一个在skrollr主体内部，另一个在主体外部，并触发它们的可见性。