首頁(yè) 猿問(wèn) 如何在滾動(dòng)位置顯示一次彈出窗口

如何在滾動(dòng)位置顯示一次彈出窗口

JavaScript

慕工程0101907 2023-02-24 15:27:20

我想在 2500 的滾動(dòng)位置顯示一個(gè)彈出窗口。但是當(dāng)我滾動(dòng)到那個(gè)位置時(shí)，彈出窗口會(huì)顯示，當(dāng)我關(guān)閉它時(shí)。再次顯示。如何在滾動(dòng)位置顯示一次彈出窗口？有什么建議么？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函數(shù)

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超4個(gè)贊

將 a 保持在范圍鏈flag的較高位置。顯示彈出窗口后刪除或重置。這是一個(gè)綁定到滾動(dòng)的示例：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");

}

});

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.

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.

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.

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!

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!

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!

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.

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.

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.

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.

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.

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.

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.

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.

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!

為了安全起見，我也將在滾動(dòng)后刪除事件監(jiān)聽器！

反對(duì) 回復(fù) 2023-02-24