Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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