Question

41

Show/Hide Element on Scroll Using Javascript Only

rated 0 times [ 47] [ 6] / answers: 1 / hits: 26061 / 11 Years ago, sat, july 27, 2013, 12:00:00

I am building a very light wp theme. The sidebar has few widgets, filling two page length only. Now, I want to utilize the rest of the sidebar when the widgets are out of sight as the user scrolls down. This would be great especially if the article is very long.

Floating element using jquery is common. As what I've said, this is supposed to be very light theme. jQuery is very heavy. Is it possible to use javascript only, even just appear and disappear, to display an element at certain page length?

Note: This theme is responsive.

[UPDATE] Problem solved! Thanks to all.

I saved 100kb+ bandwidth for jQuery.

As a reference to others, here is the new script.

<script defer type=text/javascript>var width = window.innerWidth || document.documentElement.clientWidth;

//Trigger the script only on browser width above 1150px. Recommended on responsive websites

if (width > 1150){ function testScroll(ev){

//Will set the position to FIXED with TOP=80px when user scrolls 850px below. 

if(window.pageYOffset>850){document.getElementById(targetID).style.position = fixed;document.getElementById(targetID).style.top = 80px;} 

//Will set the position to ABSOLUTE with TOP=AUTO when user scrolls to top just above 850px line

else {document.getElementById(targetID).style.position = absolute;document.getElementById(targetID).style.top = auto;};

window.onscroll=testScroll; };

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

amberlykaliac

Add To Favorites

Follow

Total Points: 415

Total Questions: 100

Total Answers: 85

Location: Wallis and Futuna

Member since Tue, Mar 30, 2021

3 Years ago

answered 11 Years ago ellisw · Accepted Answer

To FULLY answer your question you could use:

window.onscroll(function() {

    document.getElementById(target-id).style.display = block;

});

The function is triggered when the window is scrolled. It would be a good idea to put this function inside of your function for dragging the div, that way this function isn't called if the user is simply scrolling the page. If you are looking for a specific amount for the window to scroll, for example show the additional divs when the window is scrolled 400px, there is a great answer for that here: Trigger events when the window is scrolled to certain positions

I recommend using the link I've provided to set a position because window.scroll is called immediately and might not be quite what you're looking for.