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.

Answer 1

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.