0

HTML:

<div id="fixed">
    fixed
</div>

CSS:

 body{
        height: 1000px;
    }
    #fixed{
        background-color:yellow;
        width:100%;
        left:0;
        top:0;
        height:50px;
        position : fixed;
    }

最初に下にスクロールした後、divの不透明度を0.1に等しくしたい。Web で検索しましたが、css または jquery を使用してこれを達成するかどうかはわかりませんでした。

ここに私のフィドルがあります： http://jsfiddle.net/44qEr/

ありがとうございました。

4

3 に答える 3

1

CSSの不透明度を使用する場合でも、古いバージョンのIEにはないサポートとして、JavaScriptフォールバックが必要になります。したがって、CSSとjavascriptフォールバック、または単にjavascriptを使用します。

フルエディット

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > 10) {
        $('#fixed').css('opacity', .1);
        $('#fixed').addClass('scrolled');
    } else {
        $('#fixed').css('opacity', 1);
        $('#fixed').removeClass('scrolled');
    }
});

あなたのコメントに基づいて、このJSを追加してください：

$(document).on('mouseenter','.scrolled',function(){
    $('#fixed').toggleClass('hover'); 
   $('#fixed').css('opacity',1);
});
$(document).on('mouseleave','.scrolled',function(){
   $('#fixed').toggleClass('hover'); 
   $('#fixed').css('opacity',.1);
});

そしてこのCSS;

#fixed.hover {
    background-image: url(http://i.imgur.com/XiawICH.png);
    background-color: transparent;
}

http://jsfiddle.net/44qEr/7/

スクロールしないときにコードが機能するようにJavaScriptを更新しました。ホバー要素は使用できません。私は通常、可能な限り最短の方法で物事を書かないので、jqueryのプロの中には私のコードを単純化できる人もいると確信しています。

スクロールされていないかどうかを判断するためにscrollYpos、ホバーステートメントにチェックを追加することもできます。これも機能します。たぶん、実際にはわかりません。ただし、このコードは読みやすく、長くなる可能性があると思います。

以下のコードはクラスがなくても機能しますが、スクロール時にマウスがdivの上にある場合は、上部が少しバグがある可能性があります。他の方法の方が良いと思うので、終了しませんでした。

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > 10) {
        $('#fixed').css('opacity', .1);
    } else {
        $('#fixed').css('opacity', 1);
    }
});
$('#fixed').hover(function(){
   var scrollYpos = $(document).scrollTop();
   if(scrollYpos > 0){
       $('#fixed').addClass('hover'); 
       $('#fixed').css('opacity',1);
   } 
}, function(){
  var scrollYpos = $(document).scrollTop();
   if(scrollYpos > 0){
       $('#fixed').removeClass('hover'); 
       $('#fixed').css('opacity',.1);
   }
});

http://jsfiddle.net/44qEr/8/

于 2013-02-28T17:10:51.667 に答える
1

@Leeish の回答を拡張するためにanimate、以下のように代わりにプロパティを使用する方が良い場合があります。さらに、プロパティを追加する.stopと、キューに入れられたアニメーションが効果を妨げないようになります。

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > 10) {
        $('#fixed').stop(true);
        $('#fixed').animate({'opacity': .3},500);
    } else {
        $('#fixed').stop(true);
        $('#fixed').animate({'opacity': 1},500);
    }
});

デモ: http://jsfiddle.net/44qEr/4/

于 2013-02-28T17:31:42.323 に答える
0

タイマーを使用して、ウィンドウのスクロールが変更されたかどうかを確認し、必要に応じて不透明度を設定できます。

(function(){
    var $fixed = $('#fixed');
    var $window = $(window);
    var old = 0;
    setInterval(function(){
        var _new = $window.scrollTop();
        if (old == 0 && _new > 0){
            $fixed.css({opacity:0.1});
        }
        else if (old > 0 && _new == 0){
            $fixed.css({opacity:1});
        }
        old = _new;
    }, 50);                
})()

デモ

于 2013-02-28T17:20:01.240 に答える