Question

如何使这个工作室成为现实。 COM /个案研究/冠枫木/？

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

我的网站链接：altnewspaper.com

非常感谢！

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

  });

如果您想在此基础上添加动画，当然可以添加动画...

Answer 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>

滚动wordpress标题更改时

2 个答案: