使用jQuery的媒体查询

时间:2014-03-10 22:37:26

标签: jquery media-queries

我第一次使用jQuery,我有几个div动画效果很好。但是,在720p屏幕上,事件会在错误的时间触发,因为像素较少,并且事件是通过滚动的像素触发的。我尝试用媒体查询调整我的代码,但后来它就破了。

有人可以帮忙吗?

HTML示例:

<div class="textone">This is some text!</div>

CSS:

.textone {
  position:fixed;
  top:8%;
  left:-1000px;
  z-index:4;
  width:19%;
  background:#99cc00;
  border-radius:3px;
  opacity:0.9;
  font-size:1.3em;
  color:#FFFFFF;
  padding:1% 0.1% 1% 3.3%;
}

JS:

jQuery(document).ready(function ($) {
    //THIS MAKES THE SLIDEY THINGS SLIDE
    //textone
    if (window.matchMedia("(max-width: 1599px)").matches) {
        // window width is under 1599px
        jQuery(window).scroll(function () {
            if (jQuery(this).scrollTop() > 333 && jQuery(this).scrollTop() < 1667) {
                jQuery('.textone').stop().animate({ left: '0px' });
            } else {
                jQuery('.textone').stop().animate({ left: '-500px' });
            }
        });
    } else {
        // window width is greater than 1599px
        jQuery(window).scroll(function () {
            if (jQuery(this).scrollTop() > 500 && jQuery(this).scrollTop() < 2500) {
                jQuery('.textone').stop().animate({ left: '0px' });
            } else {
                jQuery('.textone').stop().animate({ left: '-500px' });
            }
        });
    }
}

1 个答案:

答案 0 :(得分:0)

您应该确定希望.textone以编程方式显示的值,而不是硬编码。

您可以从页面上某些元素的offsetTop或页面高度的百分比确定“ 333 ”和“ 1667 ”。

您可以使用jQuerys .offset().top从窗口顶部获取elemenet的偏移量。