使以下代码适用于响应能力



我有下面的代码来让顶部导航栏消失,我想问的问题是,我该如何让它只在680像素以下的宽度下工作?除此之外,它完全可以工作。

var mywindow = $(window);
        var mypos = mywindow.scrollTop();
        var up = false;
        var newscroll;
        mywindow.scroll(function () {
            newscroll = mywindow.scrollTop();
            if (newscroll > mypos && !up) {
                $('header').fadeOut();
                up = !up;
                console.log(up);
            } else if(newscroll < mypos && up) {
                $('header').fadeIn();
                up = !up;
            }
            mypos = newscroll;
        });

已修复。主要地当通过调整窗口大小来传递宽度时,脚本仍将停止/开始工作。不知道如何阻止这种情况。

//删除较低宽度页面上的导航栏

   function toggleBar(){
        var mywindow = $(window);
        var mypos = mywindow.scrollTop();
        var up = false;
        var newscroll;
        mywindow.scroll(function () {
            newscroll = mywindow.scrollTop();
            if (newscroll > mypos && !up) {
                $('header').stop().fadeOut();
                up = !up;
                console.log(up);
            } else if(newscroll < mypos && up) {
                $('header').stop().fadeIn();
                up = !up;
            }
            mypos = newscroll;
            });
        }
//REMOVE NAVBAR (place this in document load)
        $(window).load(function() {
          var pageWidth = $(window).width(); 
                    if (pageWidth < 640){
                        toggleBar();
                        $('header').attr('href','../../../css/main.css');                  
                    }      
        });
   var windowsize = $window.width();
   if (windowsize < 680 ) {
    var mypos = mywindow.scrollTop();
    var up = false;
    var newscroll;
    mywindow.scroll(function () {
        newscroll = mywindow.scrollTop();
        if (newscroll > mypos && !up) {
            $('header').fadeOut();
            up = !up;
            console.log(up);
        } else if(newscroll < mypos && up) {
            $('header').fadeIn();
            up = !up;
        }
        mypos = newscroll;
    });
  }

最新更新