고정 된 navbar 상단에 이미지 배너 추가

Question

JS를 사용하여 페이지 상단에 이미지 배너를 삽입하려고합니다. 내가 직면하고있는 문제는 고정 된 탐색 바를 사용하는 것입니다. 내 목표는 이미지 배너 아래에 탐색 모음을 넣는 것이지만 이미지 배너 아래로 스크롤하면 탐색 배너가 페이지 상단에 다시 고정되어야합니다. 여기

는 HTML 코드

<div class="wrapper"> 
    <div class="top-banner"> 
    <img src="https://b2b.bbanner.co.uk/Content/images/banner.jpg" /> 
    </div> 
    <nav id="nav"> 
    <h1>Navbar</h1> 
    </nav> 
    <h1>Content</h1> 
</div> 

CSS (사업부의 .top 배너도 래퍼의 외부에 배치 할 수는/더 쉬운 경우) :

#nav { 
    background: #f9f9f9; 
    margin: 0 0 0 133px; 
    position: fixed; 
    top: 0; 
    background-color: black; 
    height: 51px; 
    display: table; 
    min-width: 762px; 
} 

.top-banner { 
    width: 100%; 
    position: relative; 
} 

JSFIELD : https://jsfiddle.net/3nu16e59/

CSS를 사용하여이 문제를 해결하는 방법에 대한 도움이 필요하십니까? 감사합니다

Answer 1

자바 스크립트 솔루션이 jQuery를 추가하려고 사용자가 스크롤 한 감지 scrollTop을 사용하고 position: fixed

var banner = document.getElementById('banner'), 
 
\t threshold = banner.offsetTop + banner.clientHeight, 
 
    nav = document.getElementById('nav'); 
 
window.addEventListener('scroll',function() { 
 
    var scrolled = document.body.scrollTop; 
 
    if (scrolled >= threshold) { 
 
    \t nav.classList.add('fixed'); 
 
    } else { 
 
    \t nav.classList.remove('fixed'); 
 
    } 
 
})

#nav { 
 
    padding: 0; 
 
    background: #f9f9f9; 
 
    margin: 0 0 0 133px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    background-color: black; 
 
    height: 51px; 
 
    font-size: 0; 
 
    border-top: 0; 
 
    display: table; 
 
    min-width: 762px; 
 
} 
 
#nav.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.top-banner img { 
 
    display: block; 
 
}

<div class="top-banner" id="banner"> 
 
    <img src="https://b2b.bbanner.co.uk/Content/images/banner.jpg" /> 
 
</div> 
 
<div class="wrapper"> 
 
    <nav id="nav"> 
 
    <h1>Navbar</h1> 
 
    </nav> 
 
    <h1>Content</h1> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    
 
    
 
    </p> 
 
</div>

Answer 2

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

    // hide .navbar first 
    $("#nav").hide(); 

    // fade in .navbar 
    $(function() { 
     $(window).scroll(function() { 
      // set distance user needs to scroll before we fadeIn navbar 
      if ($(this).scrollTop() > 100) { 
       $('#nav').fadeIn(); 
      } else { 
       $('#navr').fadeOut(); 
      } 
     }); 


    }); 

}); 
    }(jQuery)); 

을 적용하는 클래스를 전환하는 것입니다 . 바로 내비게이션 위치 속성을 변경보다 끈적 고정에서 당신은 스크립트 태그

당신이 CSS 솔루션을을 요구하기 때문에

Answer 3

이내에 포함 할 수 있습니다 :

#nav { 
 
    padding: 0; 
 
    background: #f9f9f9; 
 
    margin: 0 0 0 133px; 
 
    position: sticky; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    top: 0; 
 
    background-color: black; 
 
    height: 51px; 
 
    font-size: 0; 
 
    border-top: 0; 
 
    display: table; 
 
    min-width: 762px; 
 
} 
 

 
.top-banner { 
 
    width: 100%; 
 
    position: relative; 
 
}

<div class="top-banner"> 
 
    <img src="https://b2b.bbanner.co.uk/Content/images/banner.jpg" /> 
 
</div> 
 
<div class="wrapper"> 
 
    <nav id="nav"> 
 
     <h1>Navbar</h1> 
 
    </nav> 
 
    <h1>Content</h1> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
</div>

Updated Fiddle합니다.

현재 (2017 년 2 월) Edge 또는 Android 브라우저에서는 스티커 위치가 지원되지 않으므로 compatibility table here을 확인하십시오.