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

Question

我想在页面顶部显示标题，并在滚动时将其隐藏，就像这个网站一样；而且我还想在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 并设置默认显示=隐藏。然后在隐藏标题时简单地显示它。这样你的鼠标悬停效应就会起作用。在显示标题时也要隐藏 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();
        }
    }
});