Make div sticky on scroll

Question

how to sticky div on scroll

see my screenshoot :

this screenshoot if sticky on top :

and this screenshoot sticky on scroll :

i mean like this, if sticky go to top the div back to normal (i mean without css sticky)

see this screenshoot, i want like this, if div stick go to the top back to normal (without css sticky) :

this my sticky :

    @media screen and (min-width: 768px) {
    .sticky {
        position: fixed;
        z-index: 9999;
        display: block;
        background-color: #2069e8;
        width: 100%;
        padding: 10px;
        margin-top: -10px;
        padding-top:10px
    }
    }

    <div class="sticky">            
    <div class="col-sm-2">
    <h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> <a href="http://myweb.com" style="color:#ffffff; text-decoration:none; position:absoulute; display:block; margin-top:-33px; margin-left:38px; z-index:5; width:250px; font-weight:bold;">MY WEB</a></h2>
    </div>
    </div>

Please Help

Thanks before

https://stackoverflow.com/questions/17893771/javascript-sticky-div-after-scroll — Jesse, Jun 10 '18 at 07:33
hi sir, thanks for reply, my problem is if sticky go to the top, the sticky back to normal i mean without sticky css — user3075428, Jun 10 '18 at 07:37
Hi Sir, i just added a screenshoot image above, to make it easier for you. can you help me, thanks — user3075428, Jun 10 '18 at 07:45

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

The easiest solution is to keep your div always sticky but increase the padding-top of the div that is below it to make sure that the content can't go under the sticky div.

This will avoid this:

By moving the page content to the bottom.

Demo: https://jsfiddle.net/g9nhq3up/

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 10 '18 at 07:33

Maxime Chéramy

17,761
8
54
75

hi sir, thanks for reply, I just added a new screenshoot image above, can you help me. – user3075428 Jun 10 '18 at 07:43
@user3075428 I believe that my solution works. I've added a demo to show you. – Maxime Chéramy Jun 10 '18 at 07:44

score 1 · Answer 2 · answered Jun 10 '18 at 07:46

You have to set padding-top: to the content (not to the nav)
See code:(JSFiddle:https://jsfiddle.net/0fp1qsw3/)

 .sticky {
        position: fixed;
        z-index: 9999;
        display: block;
        background-color: #2069e8;
        width: 100%;
        padding: 10px;
        margin-top: 15px;
        padding-top:10px
    }

.content{
  padding-top: 50px;
}

    <div class="sticky">            
    <div class="col-sm-2">
    <h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> <a href="http://myweb.com" style="color:#ffffff; text-decoration:none; position:absoulute; display:block; margin-top:-33px; margin-left:38px; z-index:5; width:250px; font-weight:bold;">MY WEB</a></h2>
    </div>
    </div>
    <div class="content">
    <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
    </div>

Make div sticky on scroll

2 Answers2