追加可視0クラスは

Question

をDIVに適用した場合、私はヘッダ非表示を追加し、次のコードを有しており、ヘッダを表示するクラスを

jQuery(document).ready(function($){ 

/* Jumbotron scroll */ 

// adjust this number to select when your button appears on scroll-down 
var offset = 300, 

// bind with the button link 
$animation = $('.jumbotron'); 

// apply animation 
$(window).scroll(function(){ 
($(this).scrollTop() > offset) ? $animation.addClass('header-hide').removeClass("header-show"): 
$animation.addClass('header-show').removeClass("header-hide"); 
}); 
}); 

CSS

.header-hide { opacity: 0; } 
.header-show { opacity: 1; } 

をジャンボトロンするために、私は困難これらの変更を行うことを備えてい私のコード

1. からdivは、私はそれがになりたいopacity: 0とき（私はそれは完全にあなたがそれを見ることができないとき消えますが、0に可視性を変更すると、それだけで消える点滅ますしたい）

Answer 1

これは、あなたが希望しているものを行うことができます - というよりも、クラス間のトグル、 .jumbotron要素のCSS不透明プロパティを設定するだけです。それが役に立てば幸い。

可視性の切り替えを含むようにEDITEDします。基本的には、不透明度がゼロになると（実際にはゼロ以下になりますが、.css（ "不透明度"）でフェッチされると0に戻ります）、可視性は非表示に設定されます。それ以外の場合、可視性は初期値に設定されます。

jQuery(document).ready(function($) { 
 

 
    /* Jumbotron scroll */ 
 

 
    // adjust this number to select when your button appears on scroll-down 
 
    var offsetStart = 300, 
 
    offsetEnd = 600, 
 

 
    // bind with the button link 
 
    $animation = $('.jumbotron'); 
 

 
    // apply animation 
 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() > offsetStart){ 
 
     // we set the opacity level based on percentage through a 
 
     // given start/end range. By doing this, we can calculate 
 
     // how quickly we want the fade to happen. 
 
     var currentOpacity = 1-(($(this).scrollTop()-offsetStart)/(offsetEnd-offsetStart)); 
 
     // uncomment this line to watch the numbers fly by. 
 
     //console.log(currentOpacity) 
 
     
 
     // Now, we want to set the css opacity value for this el. 
 
    $animation.css("opacity", currentOpacity); 
 
    if($animation.css("opacity") == 0) { 
 
     $animation.css("visibility", "hidden"); 
 
    } else { 
 
     $animation.css("visibility", "initial"); 
 
    } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='jumbotron'> 
 
<p>Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> 
 

 
<p>Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit.</p><p>Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> 
 

 
<p>Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit.</p><p>Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> 
 

 
<p>Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit.</p><p>Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> 
 

 
<p>Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit.</p><p>Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> 
 

 
<p>Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit.</p><p>Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> 
 

 
<p>Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit.</p><p>Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> 
 

 
<p>Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit.</p><p>Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> 
 

 
<p>Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit.</p> 
 
</div>