Question

我是JavaScript的新手（使用JQuery）并为固定标题创建JQuery的观察者（隐藏在向下滚动，在向上滚动时显示）+调整大小观察者以使其以移动方式友好。

我应该使用：

var
    $window = $( window ),
    minWindowHeight = ( $window.height() >= ( $( 'header' ) * 5 ) );

// Init when page opened
if ( minWindowHeight ) {
    $window.scroll(function(event){
        // Set setInterval 250 to function (avoid too often funtion call)
        //   -> the function
    });
}

// When browser window resized (for example mobile orientation)
$window.resize(function(event){
    minWindowHeight = ( $window.height() >= ( $( 'header' ) * 5 ) );

    if ( minWindowHeight ) {
        $window.scroll(function(event){
            // Set setInterval 250 to function (avoid too often funtion call)
            //   -> the function
        });
    }
});

或者

var
    $window = $( window ),
    minWindowHeight = ( $window.height() >= ( $( 'header' ) * 5 ) );

// Init when page opened
$window.scroll(function(event){

    // Set setInterval 250 to function (avoid too often funtion call)
        //   -> the function start
            if ( minWindowHeight ) {
                // do something
            }
        //   -> the function end
});

// When browser window resized (for example mobile orientation)
$window.resize(function(event){
    minWindowHeight = ( $window.height() >= ( $( 'header' ) * 5 ) );
});

或者可能完全是另一种观察者或什么？

同样回答教程解释这些事情会很棒 - 我不知道搜索哪些关键词。

提前致谢！

Answer 1

在这种特殊情况下，我建议你声明一个函数来最小化同一个变量的大调用

var win = $(window),
header = $("header");

(function($){
  function gapCalc (win,header){
    return ( $(win).height() >= ( $(header).height()*5 ) );
  }
}(jQuery));

$(window).resize(function(){
  if(gapCalc(win,header)){
    //do something
  }
});

$(document).ready(function(){
  if(gapCalc(win,header)){
    //do something
  }
});

覆盖观察者或检查函数内部的语句？

1 个答案: