当滚动大于或等于100时,我试图发出警报。
我正在使用asp.net mvc框架。现在,我有 _Layout.cshtml 和 mobile.cshtml
mobile.cshtml 页面将在 _Layout.cshtml 内部呈现。现在,我在 head tag
上的 mobile.cshtml 页面中写下以下文字@{
ViewBag.Title = "Mobile";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script>
$(window).on('load', function () {
alert('windows loaded'); // this alert is working
if ($(window).scrollTop() + $(window).height() >= 100) {
alert("Test"); // this alert is also working.bcz window height is greater than 100
}
//below all the alerts are not working
$(window).scroll(function () {
alert('ddd');
});
$(window).on('scroll',function () {
if ($(window).scrollTop() + $(window).height() >= 100) {
alert("END!" + $(window).scrollTop());
}
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= 100) {
alert("END!" + $(window).scrollTop());
}
});
$(function () {
var hasBeenTrigged = false;
$(window).scroll(function () {
if ($(this).scrollTop() >= 100 && !hasBeenTrigged) { // if scroll is greater/equal then 100 and hasBeenTrigged is set to false.
alert("You've scrolled 100 pixels.");
hasBeenTrigged = true;
}
});
});
$(function () {
$(window).bind("scroll.alert", function () {
var $this = $(this);
if ($this.scrollTop() >= 100) {
alert("You've scrolled 100 pixels.");
$this.unbind("scroll.alert");
}
});
});
})
</script>
</head>
此外,控制台上没有错误消息
我检查了这个stack overflow link
的答案更新
我已经从 _Layout.cshtml 和 mobile.cshtml 页面上删除了所有的CSS文件,然后 WORKS
当我再次从 _Layout.cshtml 页面添加一个css文件
<link href="~/Content/material.css" rel="stylesheet" />
时,则它不起作用。请记住,该css文件 Material Design Lite 文件。这就像引导程序。我必须在设计中使用此文件