显示div onscroll但永久隐藏div onclick

我有一个div，在滚动中淡入。问题是，即使我点击隐藏它，它将在滚动中再次淡入。如果有人点击关闭的“X”，如何永久隐藏它？ https://jsfiddle.net/y9txx3tn/显示div onscroll但永久隐藏div onclick

另外我想添加一些滑动效果来显示不同的文字。因此我想使用引导滑块。问题是，我已经有一个，并且出于某种原因，它不滑动，但我改变了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"); 
    } 
});

来源

2017-04-17 Krystian Manthey

当div被隐藏时，也会分离滚动处理程序。 –

使用 “标志” 要记住关闭状态。

我删除了内联onclick()以使其具有脚本。
方便阅读。

然后，我加了bewertungClosed=true它。
这将阻止滚动上的fadeIn()。

JSFiddle

$("#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>

来源

2017-04-17 01:01:39

这是工作完美，非常感谢你！你有什么想法，如何使旋转木马工作？ –

像[** here **]（https://jsfiddle.net/Bes7weB/b53vsoqt/）？ –

所有你需要做的是分离的滚动处理时bewertung DIV是隐藏的。

试试这个：

var $bewertung = $("#bewertung").hide(); 

$(window).on('scroll.bewartung', function() { 
    if ($(window).scrollTop() > 50) { 
     $bewertung.fadeIn('slow'); 
    } else { 
     $bewertung.fadeOut('fast'); 
    } 
}).find("a.close-thik").on('click', function() { 
    $bewertung.hide(); 
    $(window).off('scroll.bewartung'); 
    return false; 
});

而且从HTML删除onclick处理。

来源

2017-04-17 01:12:17

显示div onscroll但永久隐藏div onclick

回答

相关问题