Question

我已经看过Skrolllr的能力，我必须说我对易用性印象深刻。我试图在我的下一个网站构建中使用它，但似乎无法得到data-anchor-target完全做的事情？这是代码，最重要的是：

<body>
<img data-anchor-target="#topbar" data-0="opacity:0;" data-top-top="opacity:1;" class="logo-half" src="images/logo-banner-1.png">
<div class="container-fluid" id="skrollr-body">
    <div id="home" class="intro-slider">
        <div><img src="images/slide1.jpg" width="100%"></div>
        <div><img src="images/slide2.jpg" width="100%"></div>
        <div><img src="images/slide3.jpg" width="100%"></div>
    </div>
    <nav class="navbar navbar-default" id="topbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bwd-school-nav">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="images/logo-banner-2.png"></a>
            </div>

      <div class="collapse navbar-collapse" id="bwd-school-nav">
                <ul class="nav navbar-nav text-center">
                    <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#courses">Courses</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
    var s = skrollr.init({
         forceHeight: false,
    });
</script>

</body>

当滚动到达某个点时，我试图让图像（logo-banner-1.png）出现在屏幕上。定义具体值可以正常工作： data-0="opacity:0;" data-350="opacity:0;" data-400="opacity:1;"但由于我的网站具有响应性，因此固定值甚至百分比都不会起作用。该职位必须与内容相关。

此处第一个div是图像滑块，然后是导航栏。我希望图像在导航到达顶部之前稍微出现，并在导航到达顶部时完全可见。这是我使用的代码：

<img data-anchor-target="#topbar" data-0="opacity:0;" data-top-top="opacity:1;" class="logo-half" src="images/logo-banner-1.png">和

<img data-anchor-target="#topbar" data-0="opacity:0;" data--50-top-top="opacity:0;" data-top-top="opacity:1;" class="logo-half" src="images/logo-banner-1.png">

但这些都不起作用。我也见过this example并尝试了代码，但它仍然无法正常工作。我的代码出了什么问题？任何人都可以解释我是否使用data-anchor-target错误？

我包含指向我的页面的链接，您可以在其中查看此操作。该链接可能无法使用很长时间：http://www.bestwebsitedesigners.net/testbench/skrollr-demo.html

如何在skrollr中使用data-anchor-target？

0 个答案: