Make content appear when scroll down page

HTML & CSS
1

there’s only one topic for HTML & CSS now?
not good…:frowning:

some web pages now display content differently when you scroll down… like here,
(oh man, I can’t paste a url!!! what’s going on???)

at any rate, how do you do this:

scroll down the page, the nav always stays on top…

don’t even know if this is done with CSS or JS, can’t search for it… don’t know what the feature is called, don’t know what to search for…

thank you…

PS: WHY CAN’T I PASTE A URL HERE ANYMORE?
and why this is textarea so small?? it’s only or three lines tall, it’s absurd… how do you make it taller…

2

Like I have here?
http://www.codefundamentals.com/

You’ll need Javascript to achieve it. It’s called a sticky menu. You can find many of them on google if you type in “Sticky menu js”.

As far as the categories go, yes HTML and CSS were combined into one. They aren’t all that separate topics nowadays.

1 Like
3

Are you referring to the parallax effect?

If you search the forums for that term, you’ll find it’s been discussed here quite a bit.

1 Like
4

Hi Maya,
I’m just guessing here, but when you refer to pages displaying differently as you scroll down, do you by any chance mean content appearing on the page as you scroll? If so, there’s this great jQuery plugin, very easy to implement called Wow.js:

The navigation being always on top as you scroll is commonly known as sticky navigation or sticky menu, as Ryan has already pointed out.

5

thank you for your responses…

this is essentially what I wanted…

I have limited access to the internet now… can’t do extensive searches…

I found something I had done a few years ago… no plugin or special library (I think I got it from the yahoo home page… my mach is very slow, can’t see it now…) jQuery:

  $(window).scroll(function(){
        if ($(document).scrollTop() > 1){
            console.log('scroll');
            $('#header').addClass('headerScroll').css('opacity',0.8);
            $('.wrapper').addClass('wrapperScroll');
            $('#header_container').addClass("shadow");
        } else {
            $('#header').removeClass('headerScroll').css('opacity',1);;
            $('.wrapper').removeClass('wrapperScroll');
            $('#header_container').removeClass("shadow");
        }
    });

(can’t find the button to wrap code now… ???)

this works fine for the most part, except in pages where the content is up to just beneath the bottom of the page, the top section flickers, and the feature doesn’t work well…

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

6

thank you…:~))

7

I assume you are talking about the sticky header and if so only make it sticky of the window has scrolled about 150px otherwise you will get the flicker especially on mac browsers where you can scroll further than page content and thus keep triggering the sticky routine.

if ($(document).scrollTop() > 150)

Here’s an old version of mine I’ve just added to codepen.

8

thank you Paul!!!

:smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.