Question

我在页面顶部创建了一个搜索框，当页面向下滚动搜索框时，不透明度变为0.75 当页面向上滚动时，搜索框的不透明度会变回1 错误 - 我希望当搜索框被悬停或点击（在桌面上）或被录制（在移动设备上）以将不透明度变回1，但它不起作用

这是我的演示页面 - http://demo.codefuel.com/thegreatest/testpage.html?hiddenMode=true

以下是事件代码的一部分 -

var intervall = setInterval(function(){

   if ($(window).scrollTop() > 100 && $(window).scrollTop() < 505) {
            $('#bg_wrapper,#searchbox').animate({ 'opacity': 0.75 }, 500);
    }
   else if ($(window).scrollTop() > 500) {
            $('#bg_wrapper,#searchbox').animate({ 'top': -100, 'opacity': 0.75 }, 500);
    }  
   else if ($('#bg_wrapper').mouseover()) {
            $('#bg_wrapper,#searchbox').animate({ 'opacity': 1 }, 500);
    }                    
    else  {
            $('#bg_wrapper,#searchbox').animate({ 'top': 0, 'opacity': 1 }, 300);
    }
},500);

Answer 1

这很容易，逻辑被打破了。

您设置了一个条件，其中第一个if或第二个if将被使用，然后其他两个将一直被跳过。

以下是更正后的版本：

    var intervall = setInterval(function(){
       if ($(window).scrollTop() > 100 && $(window).scrollTop() < 505) {
                $('#bg_wrapper,#searchbox').animate({ 'opacity': 0.75 }, 500);
       }
       else if ($(window).scrollTop() > 500) {
                $('#bg_wrapper,#searchbox').animate({ 'top': -100, 'opacity': 0.75 }, 500);

                if ($('#bg_wrapper').mouseover()) {
                        $('#bg_wrapper,#searchbox').animate({ 'opacity': 1 }, 500);
                }  
        }           
        else  {
                $('#bg_wrapper,#searchbox').animate({ 'top': 0, 'opacity': 1 }, 300);
        }
    },500);

搜索框mouseenter和mouseover事件不适用于scrollTop事件

1 个答案: