• 当鼠标滚动时头部导航固定在顶部


    //jq 滚动
    $(document).ready(function(){
      $(window).scroll(function(){
      if($(window).scrollTop()>80){
        $('.header').addClass('position-f');
        $('#replaceImg').attr('src','../imgs/ywlogo .png');
        $('.nav2').css('display','none');
      }else{
        $('.header').removeClass('position-f');
        $('#replaceImg').attr('src','../imgs/logo.png');
        $('.nav2').css('display','block');
      }
      })
    })

    //js滚动高
    var head6 = document.getElementById("travel-header");
    var search6 = document.getElementById("travel-search");
    var banner6 = document.getElementById("travel-banner");
    var title6 = document.getElementById("travel-title");
    var nav6 = document.getElementById("travel-nav");
    var box6 = document.getElementsByClassName("travel-box")[0];

    var nav62 = document.getElementById("travel-nav2");
    var nav62Height = head6.offsetHeight+search6.offsetHeight+banner6.offsetHeight+title6.offsetHeight+nav6.offsetHeight+box6.offsetHeight;
    var headeHeight1 = head6.offsetHeight;
    window.onscroll = function(){
      var _top = document.body.scrollTop || document.documentElement.scrollTop;
      if(_top>headeHeight1){
        head6.style.position="fixed";
        head6.style.top=0+"px";
        if(_top>nav62Height){
          nav62.style.position="fixed";
          nav62.style.top=1.2+"rem";
        }else{
          document.getElementById("travel-shop").style.marginTop=1.2+"rem";
          document.getElementById("travel-shop2").style.marginTop=1.2+"rem";
          nav62.style.position="absolute";
          nav62.style.top=11.76+"rem";
        }
        }else{
          document.getElementById("travel-search").style.marginTop=1.2+"rem";
          head6.style.position="absolute";

        }
    }

  • 相关阅读:
    JavaScript中运算符的优先级
    JS中在当前日期上追加一天或者获取上一个月和下一个月
    Window命令行工具操作文件
    多线程Worker初尝试
    基于gulp的前端自动化开发构建新
    cURL和file_get_contents实现模拟post请求
    Thinkphp5使用validate实现验证功能
    微信小程序wx.pageScrollTo的替代方案
    js设计模式之代理模式以及订阅发布模式
    js设计模式之单例模式
  • 原文地址:https://www.cnblogs.com/whlBooK/p/9724561.html
Copyright © 2020-2023  润新知