Question

我在滚动页面时使用Skrollr来监控事件。

我想创建一个导航栏，它最初位于页面的中间位置。

当用户滚动直到导航栏触及视口的顶部时，它会变为position:fixed并保持在顶部。但是它不起作用。

P.S。它必须在移动设备上运行，因此所有内容都应放在#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>

Skrollr - 粘性导航栏不粘

0 个答案: