0

I've seen Skrolllr's capabilities and I must say i'm impressed with the ease of use. I'm trying to use this on my next website build but can't seem to get what data-anchor-target do exactly? Here's the code, foremost:

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

I'm trying to make an image (logo-banner-1.png) appear on screen when the scroll reaches a certain point. Defining specific values work fine: data-0="opacity:0;" data-350="opacity:0;" data-400="opacity:1;" but since my website is responsive, fixed values or even percentages won't work. The position has to be relative to the content.

Here the first div is an image slider, then a navigation bar. I want the image to start appearing slightly before the navigation reaches the top and be completely visible when the navigation reaches the top. Here's the code I used:

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

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

but none of these work. I've also seen this example and tried the code but it still doesn't work. What is wrong with my code? Can anyone explain if I'm using data-anchor-target wrong?

I'm including the link to my the page where you can see this in action. The link might not work for long though: http://www.bestwebsitedesigners.net/testbench/skrollr-demo.html

Whip
  • 1,891
  • 22
  • 43
  • Also looking for a solution like this. But from my google reserach I dont think this is how the data-anchor-target works, it has to involve a `position: fixed` element. Please share if you find a solution :) I'll do the same! – Camathon Feb 05 '15 at 16:01
  • Was looking for the same info and found this: http://stackoverflow.com/questions/23621281/what-exactly-does-data-anchor-target-do – relish27 Jun 22 '15 at 17:33

0 Answers0