当滚动 wordpress 标题更改时答案

【问题标题】：When scroll wordpress header change当滚动 wordpress 标题更改时
【发布时间】：2013-12-16 12:13:29
【问题描述】：

如何制作这个 studiompls 。 com/case-studies/crown-maple/?

我的想法是：当滚动我的网站时，this 标题从 this 更改。

我的网站链接：altnewspaper.com

非常感谢！

【问题讨论】：

你的意思是如何让你的标题在滚动时保持粘性？

标签： jquery css wordpress header effect

【解决方案1】：

我的方法是捕捉滚动，如果我越过标题，我将类更改为标题以获得固定的样式，同样的事情反过来。这是示例...

  //get height of the document -cross browser compatibility
  function getDocHeight() {
    var D = document;
    return Math.max(
      Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
      Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
      Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
  }
  $(window).scroll( function() {
    var top = $(this).scrollTop();
    //72 is height of your regular menu, not fixed
    if (top > 72)
    {
        $("body").addClass("fixedMenu");
        $(".head").removeClass("static").addClass("fixed");
        $("#helperDiv").css('height',128); //I've made this to resolve glitch that can exist when scrolling, if content is not too big
        $("#logo").hide(); // you can change images instead making two different divs
        $("#logoSmall").show();
    }
    else
    {
        $("body").removeClass("fixedMenu");
        $(".pdcaHead").removeClass("fixed").addClass("static");
        $("#helperDiv").css('height',0);            
        $("#logo").show();
        $("#logoSmall").hide();
    }

  });

如果您愿意，当然可以添加动画...

【讨论】：

【解决方案2】：

根据您的 html 使用适当的类

<style>
.header{top: 0;left: 0;right: 0;}    
</style>
<script>
$(document).ready( function() {
var topOfOthDiv = $(".header").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { 
$(".header").css({"position":"fixed","float":"left"});
$(".search").css("display","none");
}else{   
$(".header").css({"position":"static","float":"none"});
$(".search").css("display","block");
} 
}); 
});
</script>

【讨论】：