JQuery 스티커 막대가 페이지 크기를 깜박임

내 사이트에 끈끈한 '클릭 유도 문안'표시 줄을 추가했습니다. 이는 끈적 거리는 탐색처럼 작동하지만 페이지의 원래 위치가 스크롤 된 창 하단에 붙어 있습니다 과거이면, 문서의 흐름으로 다시 점프합니다.JQuery 스티커 막대가 페이지 크기를 깜박임

스크롤 위치가 막대의 원래 위치의 수직 위치보다 작을 때 고정 위치를 추가하는 데 CSS 클래스 '.sticky'를 사용합니다.

문제는 페이지의 크기를 조정할 때 불쾌한 깜박임이 나타나고 막대가 더 자주 보이지 않는 것입니다.

I는 다음과 같습니다 사용하고있는 코드 ...

(function() { 

    $(window).on('resize', function() { 

     var stickyNavTop = $('#wrap-bar').offset().top; 

     var stickyNav = function(){ 

      var scrollBottom = $(window).scrollTop() + $(window).height() - $('.cta-bar').height(); 

      if (scrollBottom < stickyNavTop) { 
       $('#wrap-bar').addClass('sticky'); 
       $('#wrap-bar-dummy').show(); 
      } else { 
       $('#wrap-bar').removeClass('sticky'); 
       $('#wrap-bar-dummy').hide(); 
      } 

     }; 

     stickyNav(); 

     $(window).scroll(function() { 
      stickyNav(); 
     }); 

    }); 

    $(document).ready(function() { 
     $(window).trigger('resize'); 
    }); 

})(jQuery);

사람이 내가 바가 크기 조절시 깜박 거림을 중지 얻기 위해 변경해야하는 것과 같이 올바른 방향으로 날 포인트?

감사합니다.

출처

2014-01-22 Dijon

어쩌면 이상한 생각을하지만 당신은 절대 다음 보텀 # 랩 바의 위치를 만들 수 있습니다 :

내가 사용 0 CSS로? 그때 jQuery가 필요하지 않습니까? –

페이지가 다른 섹션이 될 때 막대가 페이지의 흐름으로 돌아가도록하려면 jQuery가 필요합니다. 예를 들어, 클릭 유도 문안은 양식이나 꼬리말이 보이면 관련이 없습니다. – Dijon

나는 이것을 CSS를 사용하여 할 수 있다고 생각한다. 그런 다음 막대가 특정 앵커에 도달하면 jQuery를 사용하여 막대를 앵커 위치로 고정 할 수 있습니다. –

보고하는 깜박임은 Javascript가 스크롤 할 때 DOM 변경 사항을 빠르게 렌더링하지 않기 때문일 가능성이 큽니다. @Switching Brains에서 언급했듯이, CSS를 사용하여 바닥 글을 0px 위치로 절대적으로 배치하십시오. 그런 다음 Javascript 만 있으면 페이지 하단에 도달했는지 확인한 다음 클래스를 적용하여 고정 된 위치에 고정시킬 수 있습니다.

출처

2014-01-22 15:25:43

스크롤시 깜박이지 않고 크기를 변경할 때만 깜박입니다. 페이지 하단에 막대를 표시 할 필요가 없으며 절대 위치 지정은 상위 요소에 위치 값이없는 경우에만이를 수행합니다. css의 'fixed'위치를 사용하면 페이지의 맨 아래에 고정됩니다. 'sticky'클래스는이를 수행합니다. div의 원래 위치가 과거 스크롤 된 다음 제거됩니다. – Dijon

정말 더러운이의 예,하지만 당신은 아이디어를 얻을 수 있습니다 :

HTML

<div id="body"> 
    <div id="bar">Bar at the bottom</div> 
</div>

CSS

html, body { 
    height:100%; 
    widht:100%; 
} 

#body { 
    position:relative; 
    height:100%; 
    border:1px solid #000000; 
} 

#bar { 
    position:absolute; 
    bottom:20px; 
    width:300px; 
    left:50%; 
    margin-left:-150px; 
    background-color:#cccccc; 
}

http://jsfiddle.net/Auc6n/

출처

2014-01-22 15:28:42

이것은 내가 달성하기 위해 찾고있는 것이 아니며, 여기의 예를 살펴 보시기 바랍니다 ... http://www.haydockoffice.co.uk/crm/green-deal.html. 나는 바가 페이지 하단에 영구히 고정되도록 원하지 않습니다. – Dijon

내가 모질라 것을 발견. resize()는 너무 힘들게 구동되어 페이지가 많이 깜박입니다.

$window.resize(throttle(500,function(){

출처

2015-07-21 16:18:00 UllerUller

JQuery 스티커 막대가 페이지 크기를 깜박임

답변

관련 문제