1

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>
Angelo Suerte
  • 23
  • 1
  • 1
  • 6

3 Answers3

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.

Community
  • 1
  • 1
samrap
  • 5,595
  • 5
  • 31
  • 56
  • Nice one Sam. Lemme try it first. – Angelo Suerte Jul 27 '13 at 08:12
  • 1
    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! – Angelo Suerte Jul 27 '13 at 10:28
1

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)
Madan Ram
  • 880
  • 1
  • 11
  • 18
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>
Optimus Prime
  • 6,817
  • 5
  • 32
  • 60
  • Well, that's great. But the question is, how to trigger hidden/visible on scroll? – Angelo Suerte Jul 27 '13 at 07:34
  • @AngeloSuerte see the edited thing. You need to use `window.onscroll` – Optimus Prime Jul 27 '13 at 07:46
  • 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? – Angelo Suerte Jul 27 '13 at 07:54
  • @AngeloSuerte Here is a question that tells you how to get position where user has scrolled upto. http://stackoverflow.com/questions/7316482/getting-a-div-scroll-position-using-javascript – Optimus Prime Jul 27 '13 at 08:00