Cannot implement a JavaScript Code

Question

I've found this code

$(window).scroll(function(){
    $('#header').css({
        //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to  remain at 15px left
        'left': $(this).scrollLeft() + 15  
    });
});

And it does exactly what I need, but I have no idea how to implement it in my HTML or CSS. Can anyone help me out? I'd truly appreciate it.

Take a look at any page that includes Javascript to see how it's done? — TheZ
– TheZ, Commented Jul 5, 2012 at 15:36
This code requires jQuery, so you will need to include jQuery as well. — smcg
– smcg, Commented Jul 5, 2012 at 15:38
How do you know it does exactly what you need if you don't know how to run it? — Dave Newton
– Dave Newton, Commented Jul 5, 2012 at 15:39

Matt · Accepted Answer · 2012-07-05 15:39:31Z

3

That code uses jQuery, so you need to have included jQuery in the page.

Because it's JavaScript, you need to use a <script /> tag. You can add the code inline (which I'll do, as it's easier to explain), but you should look into adding it in a separate JS file and including it.

Add this in your HTML anywhere;

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <!-- Include jQuery -->
<script type="text/javascript">
    $(window).scroll(function(){
        $('#header').css({
            //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to  remain at 15px left
            'left': $(this).scrollLeft() + 15  
        });
    });
</script>

Normally you'd have to add a ready handler, but you don't if you're attaching to window, as it always exists.

answered Jul 5, 2012 at 15:39

community wiki

Matt

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Foster Over a year ago

Thank you so much, Perfect! I really appreciate your help. I didn't know how to activate jQuery... Everyone starts somewhere :)

Collectives™ on Stack Overflow

Cannot implement a JavaScript Code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related