Question

使用.scrollTop()通过.css()更改元素的边距，使其在页面滚动时浮动但仅在顶部浮动。但是，我希望将其限制在一定的边际值，这样如果用户在使其浮动的值之间向上滚动，则它不会继续移动。

问题是，怎么样？如果我在vh中使用css，即使px也无效。可以用什么单位或其他方法来做到这一点？

$(document).ready(function () {

   var floater = $('#BLOCS_s1-img5');

   $(window).scroll(function(e) {
    if ( 
         ( $(document).scrollTop() > 50 && $(document).scrollTop() < 350 ) && 
         ( floater.css('margin-top') >= -35vh )
       ) { 
         floater.css('margin-top','-=2');
         }
   });

});

HTML：

<div class='BLOCS_projSample'>
    <img id='BLOCS_s1-img4' src='images/Blocs2_logo.jpg'/>
    <img id='BLOCS_s1-img5' src='images/Blocs_pp_singleMonth.jpg'/>
    <img id='BLOCS_s1-img1' src='images/Blocs_pp_hpStack.jpg'/>
    <img id='BLOCS_s1-img2' src='images/Blocs_pp_hp.jpg'/>
    <img id='BLOCS_s1-img3' src='images/Blocs1_home.jpg'/>
</div>

CSS：

#BLOCS_s1-img5 {
    width: 16vw;
    position: relative;
    margin: -17vh 0 0 30vw;
}

Answer 1

此处jquery floater.css('margin-top') >= -35vh无效，因为

1。，因为我评论vh不能在jquery中工作，因为你必须使用$(window).height()，根据css值给出完全窗口高度等于100vh，所以得到-35vh你有使用-(35 * $( window ).height())/100给出相等的-35vh值。

2。 floater.css('margin-top')提供了px保证金最高值，但我们在这里将此值与没有单位的-(35 * $( window ).height())/100进行比较（例如px ）所以我们无法比较这两个值，因此我们使用floater.css('margin-top')

将parseInt转换为整数值

$(document).ready(function () {

    var floater = $('#BLOCS_s1-img5');
    var maxVH =  -(35 * $( window ).height())/100;
    floater.css('margin-top', -(17 * $( window ).height())/100);

    $(window).scroll(function(e) {

        if ( 
            ( $(document).scrollTop() > 50 && $(document).scrollTop() < 350 ) && 
            ( parseInt(floater.css('margin-top')) >= maxVH )
        ) { 
            floater.css('margin-top','-=2');
        }
    });

});

#BLOCS_s1-img5 {
    width: 16vw;
    position: relative;
    margin-left: 30vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='BLOCS_projSample'>
    <img id='BLOCS_s1-img4' src='https://img.tutpad.com/tut/0/280/cover.jpg?size=548x'/>
    <img id='BLOCS_s1-img5' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTN2AQWvohSCMmWXmoquRs6Qx8fkMP-52C8R4Izdu6Vd0mZCdfp8Q'/>
    <img id='BLOCS_s1-img1' src='https://static.vecteezy.com/system/resources/previews/000/093/616/non_2x/square-aztec-pattern-vectors.jpg'/>
    <img id='BLOCS_s1-img2' src='http://www.mygraphichunt.com/wp-content/uploads/2015/11/wpid-colorful-funky-chevron-pattern-vector.jpg'/>
    <img id='BLOCS_s1-img3' src='https://static.vecteezy.com/system/resources/previews/000/102/849/non_2x/vector-free-colorful-flat-herringbone-patterns.jpg'/>
</div>

用.css（）方法替换css测量单位？

1 个答案: