Question

我想在页面顶部显示标题，并在滚动时隐藏它，例如this site;我还想在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();
        }
    }
});

Answer 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;              
        }
    }
});

Answer 2

在标题div的顶部创建一个透明的假div，并设置默认的display = hidden。然后只要隐藏标题，就可以显示它。这样你的mourseover效果将起作用。在显示标题时也隐藏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();
        }
    }
});

在滚动时隐藏div并在鼠标悬停时显示它

2 个答案: