码迷,mamicode.com
首页 > 其他好文 > 详细

弹窗随屏幕滚动

时间:2020-02-17 12:10:38      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:标记   var   ima   fse   获取   ack   弹窗   window   style   

1、
$(document).ready(function() {
      var menuYloc = $("#offsetTop").offset().top - 350; //此ID为随着屏幕滚动div的ID,这个是获取的距离屏幕顶部的距离
      $(window).scroll(function() {
        var offsetTop = menuYloc + $(window).scrollTop() + "px"; //这个是距离顶部的距离加上滚动的距离
        if ($(window).scrollTop() > 248) {
          $("#offsetTop").animate(
            { top: offsetTop },
            { duration: 300, queue: false }
          ); //此ID为随着屏幕滚动div的ID
        } else {
          $(".offsetTop").animate(
            { top: 220 },
            {
              duration: 300,
              queue: false
            }
          ); //此ID为随着屏幕滚动div的ID
        }
      });
    });
注:标记颜色的部分可根据具体情况更改;
 2、
$(document).ready(function() {
      var menuYloc = $(".offsetTop").offset().top; 
      $(window).scroll(function() {
        var offsetTop = menuYloc + $(window).scrollTop() + "px";
          $(".offsetTop").animate(
            { top: offsetTop },
            { duration: 300, queue: false }
          );
          $(".offsetTop").animate(
            { top: menuYloc },
            {
              duration: 300,
              queue: false
            }
          ); 
      });
    });

弹窗随屏幕滚动

标签:标记   var   ima   fse   获取   ack   弹窗   window   style   

原文地址:https://www.cnblogs.com/lljun/p/12320823.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!