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

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&nbsp; var shownPopup = false;&nbsp; $(window).scroll(function () {&nbsp; &nbsp; if ($(window).scrollTop() > 300 && !shownPopup) {&nbsp; &nbsp; &nbsp; showPopup = true;&nbsp; &nbsp; &nbsp; alert("Popping up only once!");&nbsp; &nbsp; &nbsp; $(window).off("scroll");&nbsp; &nbsp; }&nbsp; });工作演示$(function () {&nbsp; var shownPopup = false;&nbsp; $(window).scroll(function () {&nbsp; &nbsp; if ($(window).scrollTop() > 300) {&nbsp; &nbsp; &nbsp; showPopup = true;&nbsp; &nbsp; &nbsp; alert("Popping up only once!");&nbsp; &nbsp; &nbsp; $(window).off("scroll");&nbsp; &nbsp; }&nbsp; });});<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>为了安全起见，我也将在滚动后删除事件监听器！