zoukankan      html  css  js  c++  java
  • 楼层导航奇葩问题解决

    问题:本来楼层写好特效是没有任何问题的 ,今天耗费了我一天的时间来找问题郁闷;;;;;不罗嗦了

               楼层点击滚动相应的内容页面 点一次必须刷新一下才能正常滚动 而且延迟

    1.首次解决加上刷新页面 window.location.reload()效果不是太好

    $("#floatNav .nav ul li").click(function(){
    // window.location.reload()
    var floorTop=$("#content .floor").eq($(this).index()).offset().top
    // console.log(floorTop)
    $('html,body').animate({
    'scrollTop':floorTop-100+"px"
    },280)
    // $(this).addClass('active').siblings().removeClass('active')
    })
    })

    2.最终吧body和html互换位置即可了 时间由400改为280;

    $(window).scroll(function(){

    })

    删除直接用script加载即可

    3.源码奉上供参考

    var winH=$(window).height()
    var OScrollTOp=$(window).scrollTop()
    if(OScrollTOp>400){
    $("#floatNav").fadeIn()
    }else if("OScrollTOp<400"){
    $("#floatNav").fadeOut()
    }

    $("#content .floor").each(function(){
    if(winH+OScrollTOp-$(this).offset().top>winH/2){
    $("#floatNav .nav ul li").removeClass('active')
    $("#floatNav .nav ul li").eq($(this).index()).addClass('active')
    }
    $("#floatNav .nav ul li").click(function(){
    // window.location.reload()
    var floorTop=$("#content .floor").eq($(this).index()).offset().top
    // console.log(floorTop)
    $('html,body').animate({
    'scrollTop':floorTop-100+"px"
    },280)
    // $(this).addClass('active').siblings().removeClass('active')
    })
    })
    // })

    $(".gotop").click(function() {
    $("html,body").animate({
    scrollTop: 0
    }, 400)
    })

        

            

  • 相关阅读:
    JDBC中DAO+service设计思想
    Ajax的简单基础
    Ajax的简单基础
    Jquery选择器总结二
    Jquery选择器总结二
    Jquery选择器总结一
    Jquery选择器总结一
    amazon的新算法《大数据时代:亚马逊“预判发货”,顾客未动包裹先行》
    wget命令检测端口是否监听
    KUNG FU PANDA
  • 原文地址:https://www.cnblogs.com/wensx/p/12030204.html
Copyright © 2011-2022 走看看