위치 고정 - 너비를 컨테이너와 동일하게 설정하십시오.

Question

사용자가 충분히 멀리 스크롤했을 때 div의 위치를 ​​고정으로 설정하려고했습니다. 나는 div의 위치가 고정으로 설정된 경우 width가 부모 elemnt와 같지 않다는 것을 알아 차렸다. div 요소의 너비를 position으로 유지하려면 어떻게해야합니까? 부모 요소와 동일하게 고정 되었습니까?

이 예제에서는 한 번 position : fixed가 설정된 노란색 상자와 동일한 너비의 하단 div를 원합니다.

다음

body { 
    padding:0 10px; 
    height: 1000px; 
} 

.filler-space { 
    background-color: yellow; 
    border:1px solid #000000; 
    height: 140px; 
} 

.toolbar { 
    border: 1px solid black; 
} 

.current-article { 
    font-weight: 600; 
    height: 100%; 
    line-height: 40px; 
    overflow: hidden; 
    width: 100%; 
    z-index: -1; 
} 

.progress-bar { 
    position: absolute; 
} 

.prog .progress-bar { 
    background: none repeat scroll 0 0 #F2F4F7; 
    bottom: 0; 
    height: 100%; 
    left: 0; 
    margin: 0 -10px 0 -10px; 
    overflow: hidden; 
    right: 0; 
    top: 0; 
    transition: width 0.1s ease 0s; 
    z-index: -1; 
    width: 100%; 
} 

내 자바 스크립트입니다 :

여기

<header> 
    <div class="filler-space"> 
    Filler Space 
    </div> 
    <div class="toolbar"> 
    <div class="current-article"> 
     <div class="progress-bar"></div> 
     My article 
    </div> 
    </div> 
</header> 

내 CSS입니다 : 여기

http://jsfiddle.net/BYJPB/

내 HTML의

var $toolbar = $('.toolbar'); 
var $window = $(window); 
var $header = $('header'); 

$(document).scroll(function() { 
    var scrollTop = $window.scrollTop(); 
    if (scrollTop > 150) { 
    $toolbar.css({ 
     'position' : 'fixed', 
     'top' : 0 
    }); 
    $header.addClass('prog'); 
    } 
    else { 
    $toolbar.css({ 
     'position' : 'static', 
     'top' : 0 
    }); 
    $header.removeClass('prog'); 
    } 
}); 

Answer 1

업데이트합니다 JS, 이해 해달라고 에야디야 ur 요구 사항,하지만이게 당신이 찾고있는 것 같아요.

if (scrollTop > 150) { 
    $toolbar.css({ 
     'position' : 'fixed', 
     'top' : 0, 
     'width':$header.width() 
    }); 

    $header.addClass('prog'); 
} 
else { 
    $toolbar.css({ 
     'position' : 'static', 
     'top' : 0 
    }); 
    $header.removeClass('prog'); 
}