Question

我有一个div，在滚动时淡入淡出。问题是，即使我onclick隐藏它，它会在滚动时再次淡入。如果有人点击结束“X”，如何永久隐藏它？ https://jsfiddle.net/y9txx3tn/

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

Answer 1

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

我删除了内联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>

Answer 2

您需要做的就是在隐藏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处理程序。

show div onscroll但永久隐藏div on

2 个答案: