如何在滚动位置显示一次弹出窗口

Question

我想在 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();

Answer 1

将 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>

为了安全起见，我也将在滚动后删除事件监听器！