Question

我正在我的网站上使用JS脚本（在wordpress上），以便在滚动时获得顶部标题。我现在正在处理移动和ipad的媒体查询，因为有一些问题......

我想在手机和ipad上使用这个JS，以便我的标题保持相对。我找不到办法，有人可以帮忙吗？

这是我的JS代码：

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() === stickyHeaderTop+1) {
            $('#stickyheader').hide();
            console.log('p');
        }
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').fadeIn(500).css('position','fixed');
            $('#stickyalias').css('display', 'block');
            var mT = $('#stickyheader').css('height');
            $('#stickyheader').next('.post').css('marginTop', mT);
        }else{
            $('#stickyheader').css({
                position: 'relative',
            });
            $('#stickyheader').next('.post').css('marginTop', '0');
        }
    });
});

和我的css：

#header {background-color: #f8f8f8;top: 0;padding-top: 20px;}
#stickyheader { width: 100%;padding-top:10px;top: 0;z-index: 1000;padding-bottom: 10px;line-height: 24px;position:relative;background-color: #f8f8f8;}
#unstickyheader {height:auto;}

我的媒体查询css：

/* Media queries!
-------------------------------------------------------------------------------*/

/*IPAD*/

@media screen and (max-device-width : 1024px) {

}

/*IPHONE*/
@media screen  and (max-device-width : 568px) and (min-device-width : 320px)   {
#menu-menu {list-style:none;font-size: 35px;font-weight: 700}
}

最后一个JS小提琴：

http://jsfiddle.net/64Dde/

非常感谢你的帮助，

Answer 1

这可能是您的答案：https://github.com/paulirish/matchMedia.js/

JavaScript的CSS媒体查询。

与您的代码相关的示例：

if (matchMedia("media query here").matches) {
    window.onscroll = ...
}

根据我的媒体查询禁用JS

1 个答案: