问题的背景:

在手机触屏版中,当页面向上滑动的时候,导航条可以固定在顶部,通过判断offset().top的值来实现这个功能,其他的浏览器都可以,只有微信浏览器中出现问题(向上滑动的时候,导航条就会直接飘到顶部)

问题的原因:

在微信浏览器中取不到offset().top的值

解决问题的方案:

/*导航固定*/
$(function(){
    var mydiv = document.getElementById("con_tab");
    var mt = mydiv.offsetTop;//用原生的写法可以解决这个问题
    var a = $('.con_tab'),
        b =a.offset(),//引起问题的原因
        height_a = $(".con_banner").height();
    $(document).on('scroll',function(){
        var c = $(document).scrollTop();
        if(mt < c){
            $(".tab_content").css({'margin-top':'2.8rem'})
            a.css({'position':'fixed','top':'0px'})
        }else{
            $(".tab_content").css({'margin-top':'2.8rem'})
            a.css({'position':'absolute','top':height_a})
        }
    })
})

实现效果

关于微信浏览器不支持offset()的兼容性处理关于微信浏览器不支持offset()的兼容性处理

 

write by:  tuantuan

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-08-24
  • 2022-12-23
  • 2021-12-06
猜你喜欢
  • 2022-12-23
  • 2021-08-02
  • 2022-12-23
  • 2022-01-13
  • 2021-07-24
  • 2021-10-23
  • 2021-12-09
相关资源
相似解决方案