Navbar changing size when at top of webpage

Question

In this bootstrap theme the navbar changes sizes when you scroll down and up in my JsFiddle i have tryed to recreate that but out of multiple attempts i failed and gave up . i looked on alot of stack overflow questions and other webpages maybe my keywords were wrong or something but i didnt find what i was looking for the linkss are below

Clean Canavs THEME

Jsfiddle Here

since This site wants some code ill post it but i would perfer if you guys would post jsfiddle links..

CSS

body {
padding: 0;
/* Gets rid of the automatic padding */
margin: 0;
/*  on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
/* This just adds some style to the placeholder text */
#content {
width: 600px;
padding-top: 70px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
{

HTML

 <div id="navigation">
    <a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">Our Apps</a>
<a href="#">Support</a>
<a href="#">Press</a>
<a href="#">About</a>
 </div>

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

You can do this only with javascript. Sticky Header after scrolling down

See also example jsfiddle: http://jsfiddle.net/XyVAG/9/

$(window).on("scroll", function() {
    var fromTop = $("html,body").scrollTop();
    $(window).toggleClass("down", (fromTop > 200));
});

edited May 23 '17 at 10:32

Community

1
1

answered Dec 08 '13 at 11:27

Bohdan Yurov

365
5
9

i like how that feels but not quite what i was looking for . when i get 15 rep i will make sure to +1 you – user3079663 Dec 08 '13 at 11:48

score 0 · Accepted Answer · answered Dec 08 '13 at 11:40

If you view that theme's source you'll see how they've done it

they add and remove a class via jquery

$(function () {
    $(window).scroll(function() {
        if ($("#navigation").offset().top>35) {
            $("#navigation").addClass("sticky");
        }
        else {
            $("#navigation").removeClass("sticky");
        }
    });
});

I added the sticky class which will be added to your nav when you scroll past a certain point

.sticky {
    background: rgba(0, 0, 0, 0.8);
    padding-top: 8px!important;
    height: 30px!important;
}

updated fiddle: http://jsfiddle.net/8d8c3/2/

Please remember to reference jquery in your site

Here's another method: http://stackoverflow.com/questions/6713324/how-to-shrink-navigation-menu-when-scrolling-down — toast, Dec 08 '13 at 11:45

score 0 · Answer 3 · answered Dec 08 '13 at 11:46

Here's a FIDDLE

First include jQuery library in your <head> section

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Then add below script just before the </body> tag

<script>
$(function(){
  $(window).scroll(function(){
    if($('#navigation').offset().top === 0) {
       $('#navigation').stop().animate({ height: '50px' }, 300);
    }
    else {
       $('#navigation').stop().animate({ height: '35px' }, 300);
    }
  });
});
</script>

Navbar changing size when at top of webpage

3 Answers3