Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jeremy Frimond
Jeremy Frimond
14,470 Points
Posted by Jeremy Frimond
Jeremy Frimond
14,470 Points

Need Help Getting Jquery Plugin Working: Attempting to Pin an element.

Hello,

I am using scrollMagic Plugin to attempt to Pin an element. I have been fiddling around with some of the other features and am able to create the results; however, I am unable to pin elements. I have tried a lot of different options but am not seeing my mistake. Im fairly certain it is in my scripts.

This is the link my desired result: click Here

This is the code I am using: (apologies in advance for all the code, I know it wont work in your browser but figure it will help to see what I am doing wrong. What I see in my browser is same as the example above except the icon does not pin.

cheers!

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>Scrolling Playground</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/examples.css">

    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js">
    </script>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript" src="js/general.js"></script>
    <script type="text/javascript" src="js/highlight.pack.js"></script>
    <script type="text/javascript" src="js/modernizr.custom.min.js"></script>

    <script type="text/javascript" src="js/jquery.scrollmagic.js"></script>
    <script type="text/javascript" src="js/jquery.scrollmagic.debug.js"></script>



</head>

<body>
    <section>
        <div class="spaceTaker">
        </div>
        <script>
        var controller;
        $(document).ready(function($) {
        // init controller
        controller = new ScrollMagic();
    });
        </script>
    </section>




    <div class="scrollContent">
        <section class="demo">
            <div class="spacer s2"></div>
            <div id="trigger1" class="spacer s0"></div>
            <div id="pin1" class="box2 blue">
                <p>Stay where you are (at least for a while).</p>
                <a href="#" class="viewsource">view source</a>
            </div>
            <div class="spacer s2"></div>
            <script>
            $(document).ready(function($) {
                // build scene
                var scene = new ScrollScene({triggerElement: "#trigger1", duration: 300})
                .setPin("#pin1")
                .addTo(controller);

                // show indicators (requires debug extension)
                scene.addIndicators();
            });
            </script>
        </section>

        <div class="spacer s_viewport"></div>


    </div>

</body> 

</html>

2 Answers

ryan champin
ryan champin
16,836 Points
ryan champin
ryan champin
16,836 Points

hey...did u ever get this working? im using scrollmagic and i cant for the life of me figure out how to use the trigger properly...any help would be great