CODEWITHSUNDEEP
javascriptjquerycsswordpress
Jim
Jim

Reputation: 227

Make div scroll until it reaches top of page?

I am trying to use the following example in wordpress - I need a div that holds an advert to start, say, 300px down the page, then scroll up witht he page until it reaches the top, then stay there if the user continues to scroll down. The example should explain this:

http://jsfiddle.net/jPxEY/

here it is in an html file that should work, everything seems there, but it will not work: http://www.altesc.net/exmp.html

In fact, if you look tot he right at the "Similar Questions" box and scroll down, it's exactly what i'm after.

I am pretty sure I've done everything correctly, but the javascript doesn't seem to work. If i copy everything from jquery and just add it directly to the header, and not in a separate js file, it works, it's only when i call jquery like this:

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript">

it fails to kick in.

Any ideas as to what is wrong?

Added my header to help:

<script type='text/javascript' src='http://www.altesc.net/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

<script type="text/javascript">
//<![CDATA[
$(window).load(function(){

$(document).scroll(function() {

var useFixedSidebar = $(document).scrollTop() > 330;
$('.adscrollleft').toggleClass('fixedSidebar', useFixedSidebar);

});

});//]]> 
</script>

Upvotes: 0

Views: 2488

Answers (4)

Jared Farrish
Jared Farrish

Reputation: 49238

As I said in my comment under the question, your jQuery include file has, at the very very bottom, a call to jQuery.noConflict();, which releases the $ shorthand function reference to jQuery().

So, the most straight-forward way to resolve this is to:

jQuery(window).load(function(){
    jQuery(document).scroll(function() {
        var useFixedSidebar = jQuery(document).scrollTop() > 330;
        jQuery('.adscrollleft').toggleClass('fixedSidebar', useFixedSidebar);
    });
});

And now your code works. Here's a Pastebin of the file that works on my computer (note you should not keep your browser maximized if you have a very large screen):

http://pastebin.com/GCvaCF7c

Some people really like the $ shorthand, though, so you see this a lot:

//                   >>> The $ below <<<
jQuery(window).load(function($){
    $(document).scroll(function() {
        var useFixedSidebar = $(document).scrollTop() > 330;
        $('.adscrollleft').toggleClass('fixedSidebar', useFixedSidebar);
    });
});

jQuery allows you to use it in scope. Just get used to, now, using jQUery() anytime you're in the global scope at all.

Upvotes: 1

Chanckjh
Chanckjh

Reputation: 2597

remove this: $(window).load(function(){

Upvotes: 1

Techie
Techie

Reputation: 45124

There are a few things you can try to get this working.

  1. Be sure your script is being pulled into the page, one way to check is by using the 'sources' tab in the Chrome Debugger and searching for the file else in the html head section

  2. Be sure that you've included the dependant script after you've included jQuery, as it is most certainly dependant upon that.

  3. Check whether jQuery is included properly and once only.

  4. Watch out for jQuery caonflicts. There is some other library which is overridding $, so your code is not working because $ is not an alias for jQuery anymore. You can use jQuery.noConflict() to avoid conflicts with other libraries on the page which use the same variable $.

Upvotes: 0

Joseph
Joseph

Reputation: 119877

Several issues here:

  • First, use a local copy of jQuery.

    Although the online copy would stay up all the time, it's best you have your own. To think of it in another way: What if the jQuery site went down? The script you are "leeching" would go down as well, and make your scripts that depend on the leeched jQuery to fail.

  • Load libraries first

    Scripts are loaded and parsed in sequence, one after the other (unless some async stuff was used like defer or async attribute, or a dependency loader). If your snippet depended on jQuery and was loaded before jQuery, then it would fail. Load library scripts first, then the scripts that depend on it after.

    A quick Visual of what I mean:

    <script src="jQuery.js"></script>
<script src="yourScriptThatDependsOnJQuery.js"></script>
<script>
    //scripts that depend on jQuery
</script>

Upvotes: 0

Related Questions