0

このサイトのように、ページの上部にヘッダーを表示し、スクロールすると非表示にします。また、にヘッダーを表示したいと思いmouseoverます。しかし、私はプログラマーではなくデザイナーであり、それを機能させるのに苦労しています。

私がこれまでに持っているコード： 

$(document).ready(function() {
$('#header').mouseover( function() {
        $(this).find('.action').show();
    });
});
$(window).scroll(function(){
    if ($(this).scrollTop() > 600) {
        $('#header').fadeOut();
    } else {
        if ($(this).scrollTop() > 100) {
            $('#header').fadeIn();
        }
    }
});
4

2 に答える 2

1

または、ヘッダーの不透明度を調整することもできます。テンプレートを使用した実際の例を次に示します：demo jsFiddle

JAVASCRIPT

var header, op = 1;

$(function(){
    header = $("#header");
    header.hover(
        function(){ $(this).fadeTo("fast", 1); },
        function(){ if (!op) $(this).fadeTo("fast", 0); }
    );
});
$(window).scroll(function(){
    if ($(this).scrollTop() > 600 && op == 1) {
        header.fadeTo("slow", 0);
        op = 0;
    } else {
        if ($(this).scrollTop() <= 600 && op == 0) {
            header.fadeTo("slow", 1);
            op = 1;              
        }
    }
});
于 2012-09-16T19:49:45.283 に答える
0

ヘッダーdivの上に透明な偽のdivを正確に作成し、デフォルトのdisplay=hiddenを設定します。次に、ヘッダーを非表示にするたびに表示します。そうすれば、モースオーバー効果が機能します。また、ヘッダーが表示されているときにdivを非表示にします。そうしないと、ヘッダー内のリンクをクリックできなくなります。

これがコードサンプルです

$(document).ready(function() {
$('#transparent_div').mouseover( function() {
         $('#header').fadeIn();
    });
    $('#transparent_div').mouseleave( function() {
         $('#header').fadeOut();
    });

});
$(window).scroll(function(){
    if ($(this).scrollTop() > 600) {
    $('#transparent_div').show();
        $('#header').fadeOut();
    } else {
        if ($(this).scrollTop() > 100) {
    $('#transparent_div').hide();
            $('#header').fadeIn();
        }
    }
});
于 2012-09-16T19:32:51.323 に答える