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

我想在页面顶部显示标题，并在滚动时隐藏它，如this site;我还想在mouseover上显示标题。但我是一名设计师，而不是程序员，并且正在努力实现它。滚动时隐藏div并在鼠标悬停时显示它

代码我迄今为止：

$(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(); 
     } 
    } 
});

来源

2012-09-16 user1612807

的问题是，有没有办法触发鼠标悬停事件时，不会显示标题。也许你可以在顶部添加一个小盒子，让你可以将鼠标悬停在它上面，并将标题带回来。 –

@MichaelWheeler啊，一个div可以覆盖与标题相同的空间，也许透明背景？我怎样才能从悬停不同的div来回头？谢谢！ – user1612807

或者你也可以与头的透明度发挥。这里是一个工作示例，使用您的模板：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-16 19:49:45 CronosS

谢谢！这看起来像完美的解决方案，但我无法实现它的工作！ – user1612807

@ user1612807检查出来，应该是好的（我的例子错了，对不起）：http://jsfiddle.net/6URKw/ – CronosS

问题解决了！先生非常感谢您 – user1612807

在头部股利顶部并设置为默认显示隐藏=创建一个透明假DIV exatly。然后，只要您隐藏标题，只需显示它即可。这样你的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(); 
     } 
    } 
});

来源

2012-09-16 19:32:51

谢谢！这几乎可以正常工作，但在标题返回时单击链接仍然存在问题。你可以在这里查看[链接]（http://divide.comyr.com/divide_by_two.html）。有什么建议么？ – user1612807

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

回答

相关问题