1

jqueryについて質問です。ウィンドウ サイズが 960px より大きい場合にのみ、スティッキー ナビゲーションを適用しようとしています。そのため、ウィンドウのサイズ変更またはスクロール イベントがあるかどうかを確認する必要があります...わかりません...

誰かがその問題を解決するのを手伝ってくれませんか?

ここに私が適応しようとしたコードがあります

$(function() {

    var sticky_navigation_offset_top = $('#nav').offset().top;

    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        if (scroll_top > sticky_navigation_offset_top) { 
            $('#nav').css({ 'position': 'fixed', 'top':0, 'left':0 });


        } else {
            $('#nav').css({ 'position': 'relative' }); 
        }   
    };

    sticky_navigation();

    $(window).resize(function() {
  if ($(window).width() > 960) {
        $(window).scroll(function() {
         sticky_navigation();
    });
  }
});
});
4

2 に答える 2

0

LIVE DEMO

function stickNav() { 
    var setPosition = $(window).width() > 960 ? 'fixed' : 'relative';
    $('#nav').css({position:setPosition, left:0, top:0});
}


$(function() {
    stickNav();  // Do it on DOM ready
});

$(window).resize(function() {
    stickNav();  // Do in on Resize
});

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator

于 2013-03-12T21:42:45.353 に答える
0

roXon は nav オフセットを考慮していないため、サイズ変更とスクロール時にも計算を行う必要があります。

これが私の解決策です: http://jsfiddle.net/victmo/SZV6m/

jqueryの1.8on関数を使用しています：win.on('resize scroll', function(){...

Javascript

var minWidthToStick = 300;

var nav = $('#nav'); // caching nav
var offset = nav.offset().top; // getting offset
var win = $(window); // caching window

win.on('resize scroll', function(){
    if(
        win.width() >= minWidthToStick && 
        win.scrollTop() >= offset
    ){
        nav.css('position', 'fixed');
    }else{
        nav.css('position', 'relative');
    }
}).resize();

そのコードを関数内に入れることを忘れないでください$(document).ready(function(){ ... }):)

于 2013-03-12T22:05:02.253 に答える