Div to fade in at certain point on scroll

Question

I have a white header above a blue banner, as I scroll down to the body of my website the header gets a little lost in the white background of the website, I want to add a little shadow (using a jpeg file) but I only want it to appear 'after' the blue banner, is this possible? Here's what I have so far?

Here is the Javascript

<script>
var divs = $('.line');
$(window).scroll(function(){
   if($(window).scrollTop()<101){
         divs.fadeOut("slow");
   } else {
         divs.fadeIn("slow");
   }
});
</script>

And here is the CSS

.line {
  position: fixed;
  z-index: 100000;
  margin:0 auto;
  top:0px; width:100%;
  background:#ff0000;
}

Any help would be appreciated. Thanks guys

possible duplicate of [Show Div when scroll position](http://stackoverflow.com/questions/9097501/show-div-when-scroll-position) — davewoodhall, Jan 30 '14 at 15:33
You've done a good job of asking your question and showing what you've done so far. However, you never told us what was wrong with your approach. Was it showing the div at the wrong time? Showing errors in the console? Not causing any effect at all? — Phrogz, Jan 30 '14 at 15:35
Thanks :) well I have this working quite well on jsfiddle, however when I implement this into my website, the 'line' sits static at the top of the page. — Liam David Hodnett, Jan 30 '14 at 15:36
Problem solved! Im not sure as to why but as soon as I moved the javascript just above the
tag, it worked like a charm! — Liam David Hodnett, Jan 30 '14 at 15:41
Then you need to perform standard debugging: is the script being run at all? (Place a breakpoint in it, or an `alert()` call at the top.) Is it throwing any errors? (Look in the JavaScript console.) Is your conditional branch of code being executed? (Place a breakpoint, within, or an `alert()` or `console.log()`.) If not, why not? (Break into the debugger and evaluate the value of `scrollTop()`. — Phrogz, Jan 30 '14 at 15:41

score 0 · Answer 1 · answered Jan 30 '14 at 15:44

Based on the fix of moving the script block to before </body>, the problem was that your script block was executing before the content of your page has loaded. Specifically, var divs = $('.line'); was not finding any matching elements.

The other way to do this is to place your script wherever you want (in the <head>, preferably linked from another file) and cause this code to only run once the document has loaded:

$(function(){
  // This code runs when the document is ready.
  // Put your code here.
);

Alternatively (and less desirable) you can do what you did: place the script block at the bottom of your document, immediately before </body>.

Div to fade in at certain point on scroll

1 Answers1