要素がブラウザに表示されている間divを表示しない

Question

高さが1000ピクセルを超えるWebページがあります。私は常に訪問者に表示する必要がある重要なテキストがあります。私はページの上部に固定プロパティを持つ20ピクセルの高さのDIVを配置しましたが、そのDIVの内容はブラウザの中に表示されます。私は一番上のdivを隠したいと思っていますが、中のdivから上にスクロールすると、一番上のdivが表示されます。

Answer 1

あなたはこのようなものをお探しですか？それが表示されていないときは、span#interestingが表示されているときのdivを表示するには、このJavaScriptを使用して、それを隠すことができ

<p>a bunch of text, and duplicate this several times. I used lorem ipsum</p> 
<p><span id="interesting">Here is the interesting text.</span></p> 
<p>a bunch more text, and duplicate this several times. I used lorem ipsum</p> 

：このHTML考える

• http://jsfiddle.net/3vEaF/

// Add a div to contain a copy of the interesting text 
var interestingOffscreen = $('<div/>') 
    .attr('id', 'interesting') 
    .text($("span#interesting").text()); 

$('body').prepend(interestingOffscreen); 

// Center the display of that copy 
interestingOffscreen.css(
    'margin-left', 
    -(interestingOffscreen.outerWidth()/2) 
); 

// Detect when it is offscreen/onscreen and react  
function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
} 

var isNotVisibleHandler; // forward declaration 

function isVisibleHandler() 
{ 
    if(isScrolledIntoView($("span#interesting"))) 
    { 
     $(window).unbind('scroll'); 
     interestingOffscreen.fadeOut(
      function() { 
       $(window).scroll(isNotVisibleHandler); 
       $(window).scroll(); // force detection 
      } 
     ); 
    } 
} 

isNotVisibleHandler = function() 
{ 
    if(!isScrolledIntoView($("span#interesting"))) 
    { 
     $(window).unbind('scroll'); 
     interestingOffscreen.fadeIn(
      function() { 
       $(window).scroll(isVisibleHandler); 
       $(window).scroll(); // force detection 
      } 
     ); 
    } 
}; 

$(window).scroll(isVisibleHandler); 

このすべてが厳密に必要なわけではありませんが、私は見た目は冷静です。