div onscrollを表示しますが、div onclickを永久に非表示にします

私はdivを持っています。問題は、たとえ私がonclickを隠していても、スクロールで再び消えることです。誰かが閉じた "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

それは完璧に動作しています、ありがとう！どのようにカルーセルを動作させるか、何か考えていますか？ –

[**ここ**]（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を永久に非表示にします

答えて

関連する問題