相关疑难解决方法(0)
当用户滚动到div时如何做某事？
我有一个div id="content".
如果用户看到,是否可以执行操作id="content"？
推荐指数
解决办法
查看次数
如何在屏幕上显示页脚时隐藏固定的DIV？
我有一个固定的侧边栏,在向下滚动时可以在页面上看到.
问题是 - 在某些情况下 - 边栏在到达页面底部时越过页脚.
当页脚在屏幕上可见时我想隐藏侧边栏以避免这种情况.我该怎么做？
推荐指数
解决办法
查看次数
JavaScript/jQuery 在元素进入视口时添加类？
当我想要应用类的元素进入视口时，有没有办法添加类？或者当屏幕底部超过元素顶部一定距离时？
现在我有我想要使用这样的效果：
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
问题在于它是相对于文档高度的，所以当我缩小页面（或在移动设备上查看）并且元素堆叠在一起时，页面变得更高并且类（动画）在元素进入视野。
我看到其他人提出了类似的问题，我试图实施他们得到的答案，但我无法得到任何帮助，因此将不胜感激。
这就是我所拥有的：
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
$(document).ready(function() {
$(".graph-line.one").addClass("graph-75");
$(".graph-line-2.one").addClass("opacity");
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
$(".graph-line-2.two").addClass("opacity");
}
if ($(document).scrollTop() > 450) {
$(".graph-line.three").addClass("graph-75");
$(".graph-line-2.three").addClass("opacity");
}
if ($(document).scrollTop() > 800) {
$(".graph-line.four").addClass("graph-75");
$(".graph-line-2.four").addClass("opacity");
}
if ($(document).scrollTop() > 1150) {
$(".graph-line.five").addClass("graph-75");
$(".graph-line-2.five").addClass("opacity");
}
if ($(document).scrollTop() > 1500) {
$(".graph-line.six").addClass("graph-75");
$(".graph-line-2.six").addClass("opacity");
}
});
});.graph {
display: block;
margin: 100px auto;
transform: rotate(-90deg);
will-change: transform;
}
.graph-line {
stroke-dasharray: …推荐指数
解决办法
查看次数
粘性标题使用 Angular 在内容上没有事件滚动
我正在尝试使用 Angular Material 设置两个粘性 div（一个标题，一个 sidenav）。当我向下滚动到我的内容时，粘性 div 可以工作，除了滚动事件。
当我向下滚动时，我有这样的事情：
我的问题是：当我向下滚动时，我没有来自 Angular 的任何滚动事件。如果我通过将值设置为 height css 属性来更改 style.scss 文件，则所有粘性 div 都不再起作用，但我有来自 Angular 的滚动事件。
这让我很紧张:(有什么想法可以解决这个问题吗？非常感谢！
样式文件
html, body {
min-height: auto; // sticky header doesn't work but scroll event Angular OK
// height: 100%; // sticky header works but scroll event Angular NOK
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
粘性标题代码：
应用程序组件.html
html, body {
min-height: auto; // sticky header doesn't work but scroll event Angular OK
// height: …推荐指数
解决办法
查看次数
我为什么要使用<noscript>？
在这里幽默我.
我为什么要<noscript>在我的页面中使用？替代方案(至少是我使用的那个)是与(例如)HTML 5 Boilerplate一起使用的Modernizr + no-js类组合,到目前为止,这在所有用例中已经足够了.
我可以想到使用的唯一原因<noscript>是在没有启用JS时有条件地加载资源文件(很可能是CSS覆盖？).我不确定是否有办法在不使用JS的情况下完成JS <noscript>,但即使是那个用例似乎也可以解决它.
下面有很多明显的答案.
是的,<noscript>用于在Javascript不可用时有条件地向客户端显示/隐藏HTML元素.我知道.你知道的.每个使用HTML的人都应该知道这一点.
但是,还有很多其他方法可以做同样的事情,其中大多数都是首选<noscript>.一个是html.no-jsModernizr切换的类,我在上面提到过.
所以问题背后的想法更多的是,<noscript>对于Web开发人员来说,它有什么独特之处吗？也就是说,它足够重要,但除此之外别无他法.
下面的@Guffa对广告提出了一个很好的观点.
推荐指数
解决办法
查看次数
Javascript，检查元素是否离开屏幕
我正在尝试测试 a 是否<div>已滚动到视图之外。
这就是我到目前为止所拥有的
$(window).on('scroll',function(){
var divBottom = $('#home').offset().bottom;
var windowTop = $(window).scrollTop();
var windowBottom = windowTop + $(window).height();
if (divBottom >= windowTop) {
console.log("yes");
} else {
console.log("no");
}
});
无论我滚动到哪里，都不会记录任何内容。
我试图测试的是 div 的底部是否超过了窗口的顶部。
推荐指数
解决办法
查看次数
如何使粘性横幅停留在页脚上方？
在我的网站中，我必须创建一个政策横幅。
我的网站已经包含内容和页脚的 div。
我想要的是？
- 我想以一种方式设置这个横幅，它会粘在用户的视口底部（注意：它不应该在页面底部，而应该留在用户的显示底部）。
- 当用户滚动页面时，横幅应该在滚动时粘在底部，当页脚出现时应该停止。
- 页脚将保留在页面末尾。
现在，我已经实现的大部分事情，但问题是将页脚保持在底部，横幅滚动应停止在页脚上方。
我的示例代码：
.main-area {
height: 1000vh;
background-color: #ccc;
width: 2000px;
position: relative;
}
.policy-banner {
height: 100px;
width: 2000px;
color: yellow;
background-color: blue;
position: fixed;
bottom: 0;
left: 0;
}
.footer {
background-color: black;
height: 50px;
color: white;
position: fixed;
bottom: 0;
left: 0;
}<html>
<head>
</head>
<body>
<div class="main-area">
<section>another sections coming dynamically</section>
<section>another sections coming dynamically</section>
<div class="policy-banner">
this is banner, it should stick to the user's view port.
when …推荐指数
解决办法
查看次数