zoukankan      html  css  js  c++  java
  • 当鼠标滚动时头部导航固定在顶部

    //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";

        }
    }

  • 相关阅读:
    Tensorflow的对二次函数的神经网络训练
    ubuntu16.04的Anaconda下的tensorflow安装py3.5
    数字信号处理C语言(3) ------FFT
    数字信号处理C语言(2) ------带高斯噪声的sin函数和组合sin函数
    数字信号处理C语言(1) ------均匀分布和高斯分布随机数
    CCIE学习笔记 ----TSHOOT
    CCIE学习笔记 ----BGP
    CCIE学习笔记 ----GRE over IPsec
    调试
    Java protobuf框架使用向导
  • 原文地址:https://www.cnblogs.com/whlBooK/p/9724561.html
Copyright © 2011-2022 走看看