CODEWITHSUNDEEP
jqueryresponsive-designskrollr
Whip
Whip

Reputation: 2244

How to use data-anchor-target in skrollr?

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

Upvotes: 0

Views: 2022

Answers (0)

Related Questions