Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Media Queries for JS? Reply To: Media Queries for JS?

#169473
Shaz3e
Participant

my CSS Code for Media Query

    <style type="text/css">
        @media (min-width: 980px) {
            .dc-fixed{position:fixed;}
            .dc-fixed-header{
                margin:0 !important;
                top:0;
                display:block;
                width:100%;
                z-index:9999;
            }
        }
    </style>

My Js Code

    <script type="text/javascript">
        var dcHeader = $(window);
        var dcHeaderPosition = dcHeader.scrollTop();
        var up = false;
        var newscroll;
        dcHeader.scroll(function () {
            newscroll = dcHeader.scrollTop();
            if (newscroll > dcHeaderPosition && !up && newscroll > 250) {
                $('.dc-fixed-header').stop().slideUp({duration:1000);
                up = !up;
                console.log(up);                
            } else if(newscroll < dcHeaderPosition && up) {
                $('.dc-fixed-header').stop().slideDown({duration:1000);
                up = !up;
            }
            dcHeaderPosition = newscroll;
        });
        
        var  dcFixedHeader = $('.dc-fixed-header');
            dcFixed = "dc-fixed";

        $(window).scroll(function() {
            if( $(this).scrollTop()) {
                dcFixedHeader.addClass(dcFixed);
            }else{
                dcFixedHeader.removeClass(dcFixed);
            }
        });

    </script>

I just want this code to be loaded when the browser window is higher than 980px I don’t want to run the code when the browser window is lower than 980px any solution for this. because when I re-size my browser window the code is still load and I have huge menu list in my header which hides after 250px becuase that’s what I have defined. I am calling these before </body> tag