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

        }
    }

  • 相关阅读:
    保持比例图像缩放简易算法
    ASP.Net中自定义Http处理及应用之HttpModule篇
    用于ASP.NET2.0的进度条控件(实时)
    VS2008SP1下jQuery使用初体验
    qau国庆七天乐——A
    现在的信息科学是泡沫吗?
    dp入门问题
    day09 10 11 12 三天函数内容
    day08文件操作
    day02五大运算符:逻辑运算符、成员运算符、算数、比较、赋值、
  • 原文地址:https://www.cnblogs.com/whlBooK/p/9724561.html
Copyright © 2011-2022 走看看