我有一个 div，它会在滚动时淡入。问题是，即使我单击隐藏它，它也会在滚动时再次淡入。如果有人点击结束的“X”，如何永久隐藏它？ https://jsfiddle.net/y9txx3tn/
另外我想添加一些滑动效果来显示不同的文本。因此我想使用引导 slider 。问题是，我已经有了一个，但出于某种原因，尽管我更改了 id，它还是没有滑动。
<div id="bewertung">
<div id="carousel-bounding-box">
<a href="#" class="close-thik" onclick="document.getElementById('bewertung').style.display='none';return false;"></a>
<div id="slidebewertung" class="carousel slide">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<strong>Sven</strong> <br>
<small>Head of Marketing Göpel GmbH</small><br>
<img src="./bilder/erfahrung-bm-translations.JPG" /><br>
<em>sdfsdeit</em>
</div>
<div class="item" data-slide-number="1">
<strong>Sven</strong> <br>
<small>Head of Marketing Göpel GmbH</small><br>
<img src="./bilder/erfahrung-bm-translations.JPG" /><br>
<em>sdfsdfhkeit</em>
</div>
<div class="item" data-slide-number="2">
<strong>Sven </strong> <br>
<small>Head of Marketing Göpel GmbH</small><br>
<img src="./bilder/erfahrung-bm-translations.JPG" /><br>
<em>Frsdfdsfhkeit</em>
</div>
<div class="item" data-slide-number="3">
<strong>Sven </strong> <br>
<small>Head of Marketing Göpel GmbH</small><br>
<img src="./bilder/erfahrung-bm-translations.JPG" /><br>
<em>Freusdfsdfsdff</em>
</div>
</div>
</div>
</div>
</div>
CSS
#bewertung{
width: 140px;
bottom: 0;
float: right;
left: 0;
position: fixed;
z-index: 99;
background: white;
border: 1px solid grey;
border-radius: 10px;
padding: 1%;
font-size: 11px;
}
[class*='close-'] {
color: #777;
font: 14px/100% arial, sans-serif;
position: absolute;
right: 5px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
top: 5px;
}
.close-thik:after {
content: '✖'; /* UTF-8 symbol */
}
Javascript
$("#bewertung").hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 250) {
$("#bewertung").fadeIn("slow");
$('#slidebewertung').carousel({
interval: 8000
});
}
else {
$("#bewertung").fadeOut("fast");
}
});
最佳答案
使用“标志”来记住关闭状态。
我删除了内联 onclick() 以将其包含在脚本中。
更容易阅读。
然后，我向其中添加了 bewertungClosed=true。
这将阻止滚动时的fadeIn()。
$("#bewertung").hide();
var bewertungClosed=false;
$(window).scroll(function() {
if ($(window).scrollTop() > 50 && !bewertungClosed) {
$("#bewertung").fadeIn("slow");
}
else {
$("#bewertung").fadeOut("fast");
}
});
$(".close-thik").on("click",function(){
document.getElementById('bewertung').style.display='none';
bewertungClosed=true;
return false;
});#bewertung{
width: 140px;
bottom: 0;
float: right;
left: 0;
position: fixed;
z-index: 99;
background: white;
border: 1px solid grey;
border-radius: 10px;
padding: 1%;
font-size: 11px;
}
[class*='close-'] {
color: #777;
font: 14px/100% arial, sans-serif;
position: absolute;
right: 5px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
top: 5px;
}
.close-thik:after {
content: '✖'; /* UTF-8 symbol */
}<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head>
<div id="bewertung">
<div id="carousel-bounding-box">
<a href="#" class="close-thik"></a>
<div id="slidebewertung" class="carousel slide">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<strong>Sven</strong> <br>
<small>Head of Marketing Göpel GmbH</small><br>
<img src="./bilder/erfahrung-bm-translations.JPG" /><br>
<em>sdfsdeit</em>
</div>
<div class="item" data-slide-number="1">
<strong>Sven</strong> <br>
<small>Head of Marketing Göpel GmbH</small><br>
<img src="./bilder/erfahrung-bm-translations.JPG" /><br>
<em>sdfsdfhkeit</em>
</div>
<div class="item" data-slide-number="2">
<strong>Sven </strong> <br>
<small>Head of Marketing Göpel GmbH</small><br>
<img src="./bilder/erfahrung-bm-translations.JPG" /><br>
<em>Frsdfdsfhkeit</em>
</div>
<div class="item" data-slide-number="3">
<strong>Sven </strong> <br>
<small>Head of Marketing Göpel GmbH</small><br>
<img src="./bilder/erfahrung-bm-translations.JPG" /><br>
<em>Freusdfsdfsdff</em>
</div>
</div>
</div>
</div>
</div>
<p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p><p>. </p>关于javascript - 显示 div onscroll 但永久隐藏 div onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43443448/