Show/Hide Element on Scroll Using Javascript Only

Question

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>

I think eliminating jquery is part of jquery topic too. It's like innovation(?). — Angelo Suerte
– Angelo Suerte, Commented Jul 27, 2013 at 7:26

Community · Accepted Answer · 2017-05-23 10:28:19Z

3

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.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jul 27, 2013 at 7:53

samrap

5,6735 gold badges34 silver badges56 bronze badges

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

2 Comments

Angelo Suerte Over a year ago

Nice one Sam. Lemme try it first.

Angelo Suerte Over a year ago

Hey Sam! The code, together with the link, works! Now, I have made an element floater on the sidebar. Instead of showing/hiding, I made it position:fixed;top=0 on offset > 1000px and position:absolute;top=auto on offset < 1000px. I saved 100+ kb on jQuery. Kudos!

Optimus Prime · Accepted Answer · 2013-07-27 07:46:04Z

1

document.getElementById("target-id").style.visibility = "visible";   //To show the element.

Edited..

you can accomplish this using regular Javascript:

<script>
function scrollFunction() {
     document.getElementById("target-id").style.visibility = "hidden";   //To hide the element.
}

window.onscroll = scrollFunction;
</script>

edited Jul 27, 2013 at 7:46

answered Jul 27, 2013 at 7:30

Optimus Prime

6,9475 gold badges37 silver badges65 bronze badges

4 Comments

Angelo Suerte Over a year ago

Well, that's great. But the question is, how to trigger hidden/visible on scroll?

Optimus Prime Over a year ago

@AngeloSuerte see the edited thing. You need to use window.onscroll

Angelo Suerte Over a year ago

Yeah, thanks. One more thing: how can you make this on certain area of the page? Perhaps in the middle of the page when the user is almost finished reading?

Optimus Prime Over a year ago

@AngeloSuerte Here is a question that tells you how to get position where user has scrolled upto. stackoverflow.com/questions/7316482/…

Madan Ram · Accepted Answer · 2013-07-27 07:24:07Z

0

If you don't use any 3rd party javascript (eg: jQuery), then use it:

    document.getElementById('target-id').style.display = 'none'; // hide it
    document.getElementById('target-id').style.display = 'block'; // show it (for block element, eg: div)
    document.getElementById('target-id').style.display = 'inline'; // show it (for inline element, eg: span)

answered Jul 27, 2013 at 7:24

Madan Ram

8761 gold badge11 silver badges18 bronze badges

1 Comment

Angelo Suerte Over a year ago

How do you implement this when the widgets are out of sight? Let's say, the user scrolled down?

Collectives™ on Stack Overflow

Show/Hide Element on Scroll Using Javascript Only

3 Answers 3

2 Comments

Edited..

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Edited..

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related