亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在滾動位置顯示一次彈出窗口

如何在滾動位置顯示一次彈出窗口

慕工程0101907 2023-02-24 15:27:20
我想在 2500 的滾動位置顯示一個彈出窗口。但是當我滾動到那個位置時,彈出窗口會顯示,當我關閉它時。再次顯示。如何在滾動位置顯示一次彈出窗口?有什么建議么?const showWinBiryaniPopup = () => {  let showPopup = true;  if ($(document).scrollTop() >= 2500 && showPopup) {    $('#win-biryani-modal').modal('show');    showPopup = false;  } else {    $('#win-biryani-modal').modal('hide');  }};showWinBiryaniPopup();
查看完整描述

1 回答

?
HUH函數

TA貢獻1836條經驗 獲得超4個贊

將 a 保持在范圍鏈flag的較高位置。顯示彈出窗口后刪除或重置。這是一個綁定到滾動的示例:flag


  var shownPopup = false;

  $(window).scroll(function () {

    if ($(window).scrollTop() > 300 && !shownPopup) {

      showPopup = true;

      alert("Popping up only once!");

      $(window).off("scroll");

    }

  });

工作演示

$(function () {

  var shownPopup = false;

  $(window).scroll(function () {

    if ($(window).scrollTop() > 300) {

      showPopup = true;

      alert("Popping up only once!");

      $(window).off("scroll");

    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo alias repellendus quisquam. Quam nihil tempora sint, hic qui eligendi, tenetur quia! Beatae illum consectetur, assumenda suscipit culpa, ab nam aliquam.</p>

<p>Voluptatibus tenetur id tempore nobis ex, optio facere quia, cupiditate cum repellendus reprehenderit nihil illum mollitia deleniti doloribus ad quaerat expedita! Quis dolor eaque natus praesentium aliquid consequuntur cumque officiis.</p>

<p>Molestiae repudiandae alias cumque repellendus. Praesentium voluptas non id ducimus corporis nesciunt numquam pariatur qui soluta exercitationem unde incidunt in, itaque tempore dignissimos obcaecati maxime laborum debitis tenetur similique beatae.</p>

<p>Quos optio ipsa, voluptatem dolorum illum architecto perspiciatis minus error, impedit aliquid totam fugit vitae enim possimus nobis ut accusamus facere temporibus vero explicabo! Ullam iure nobis ea qui nisi!</p>

<p>Corporis aspernatur quas beatae numquam temporibus, nulla reiciendis laborum quia, officia incidunt saepe suscipit alias, minus ducimus tempora sint impedit nihil id! Asperiores sapiente, inventore enim eius debitis voluptas reprehenderit!</p>

<p>Sed nostrum voluptatibus aperiam, officiis fugiat eos asperiores iste quaerat magnam quidem provident dolorum iure consectetur accusantium neque in, blanditiis quas explicabo nisi quo laudantium dolor alias, vero repudiandae? Laboriosam!</p>

<p>Facere, soluta fugiat rerum, delectus dolore blanditiis provident? Accusamus ratione libero amet, beatae aliquid obcaecati tenetur, suscipit at est nisi iste. Corporis laboriosam at explicabo facere quia ipsam magnam nesciunt.</p>

<p>Laudantium perspiciatis perferendis quo velit maxime ducimus. Voluptatum earum iusto laboriosam, vel quaerat doloremque dignissimos totam molestiae, nostrum quia iste ea. Nobis molestias, quibusdam deserunt nostrum sunt, odio quae cum.</p>

<p>Atque, maxime cum quas doloribus corporis doloremque vero perferendis eaque ratione error iusto dignissimos iste ea aliquid quaerat deleniti, veniam, minus, non vel voluptas aliquam accusamus laudantium recusandae molestias facilis.</p>

<p>Porro dolores, consectetur ut expedita, aut, nam ea autem saepe vel veniam nobis maiores quod, quibusdam. Sunt, omnis. Eos corrupti itaque, totam quia, eum alias vero voluptas esse incidunt exercitationem.</p>

<p>Quam, accusantium corrupti soluta, obcaecati eveniet repellat voluptates, officiis eos architecto provident fugiat rerum eaque. Alias reiciendis, quae quos voluptatibus dolore aperiam incidunt illo amet reprehenderit. Qui accusantium porro totam.</p>

<p>Est earum, aliquid. Recusandae aliquid delectus asperiores laudantium corporis eum quaerat? Praesentium commodi molestiae, aperiam laboriosam perferendis facere atque mollitia. Dignissimos deleniti, placeat temporibus vel quos quam iure excepturi error.</p>

<p>Eum quisquam fugit ratione beatae dicta commodi quidem magni, aspernatur harum vero, repudiandae atque fuga praesentium ipsa nihil et at architecto mollitia nesciunt dolore illum. Illum veritatis amet provident velit.</p>

<p>Cupiditate magnam dolor at aspernatur odio quas, odit in et dignissimos? Quibusdam in, dolor magni ipsum, deserunt illo asperiores, voluptate illum explicabo, quo totam tempore iste rem! Dolor dolorem, itaque.</p>

<p>Sit voluptatibus, obcaecati! Quas, accusamus laborum. Voluptas adipisci quos eius nulla reprehenderit, praesentium deleniti explicabo! Expedita voluptas, nam officiis ullam incidunt perspiciatis vero nisi iste iusto. Expedita fugiat, quaerat error!</p>

為了安全起見,我也將在滾動后刪除事件監聽器!



查看完整回答
反對 回復 2023-02-24
  • 1 回答
  • 0 關注
  • 151 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號