Question

我第一次使用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' });
            }
        });
    }
}

Answer 1

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

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

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

使用jQuery的媒体查询

1 个答案: