How to keep the navbar fixed to top in big screens only using jquery


Tags: javascript,jquery,css

Problem :

Basically I want my menu to activate the fixed class when the when I scroll down 150 pixels and the width of the screen is bigger than 850 pixels.

I used this code but the menu is still being fixed to the top in small screens(less than 850px):

$(window).on('resize', function() {
        if ($(window).width() > 850) {
            var num = 150;
//            $('nav#site-navigation').addClass('fixed');
                $(window).bind('scroll', function () {
                    if ($(window).scrollTop() > num) {
                        $('nav#site-navigation').addClass('fixed');
                        }
                     else {                    
                        $('nav#site-navigation').removeClass('fixed');
                    }
                });
            }

        else{
            $('nav#site-navigation').removeClass('fixed');
        }

Here my css if needed:

.fixed {
    top: 0%;
    width: 100%;
    text-align: center;
    bottom: auto !important;
    z-index: 9999;
    position:fixed !important;
} 

How can I put the navbar fixed to the top only when the screen is bigger than 850?



Solution :

You can add a media query to that css class:

@media only screen and (min-width: 850px){
    .fixed {
        top: 0%;
        width: 100%;
        text-align: center;
        bottom: auto !important;
        z-index: 9999;
        position:fixed !important;
    } 
}

    CSS Howto..

    how to indent HTML forms on modals [closed]

    How to free a paragraph from its CSS style?

    when click on button then show message

    How to change CSS style upon clicking button with JS

    showing a css component for a specified number of seconds

    how to change browsers default scrollbar using css or jquery

    How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?

    How do I filter unwanted CS styles from CS sheet?

    How to get cards with his content perfectly alligned

    How to control new line position after CSS display inline-block break

    How to show hidden button with css media query?

    Google App Engine: how to use the internal CSS in the template?

    How to disable temporary cursor with javascript?

    How to remove flexbox default padding/margin/pagemargin?

    How to Vertical align text in div

    How to overlay a div over a canvas CSS

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    How to get span to be only as wide as the image inside of it?

    Ideas with how to draw a specific large amount of circles on a page using a loop

    How can I change the inline style text color of an element without the ability to add a class or id?

    How do I position a Silverlight Control

    How to add fade in and fade out when changing between texts in javascript

    How to calculate CSS letter-spacing v.s. “tracking” in typography?

    How to style the last element before another specific element in CSS? [duplicate]

    How to link a table cell?

    How to limit width of

    -

    tag by length of content

    CSS and HTML: How to create an Expanding DIV On Click?

    How to manipulate the window list color?

    How do I make a table show a vertical scroll bar without explicitly setting the height?

    Show Child Div Above Elements on Parent Div Level using z-index