0

スクロール中にサブメニューがページの上部に到達すると、スクロール中にサブメニューをページの上部にとどめようとしています。これが私がこれまでに持っているものです：

$(window).scroll(function () {    
  if ($(window).scrollTop() > 175) {
$('#location_menu').css('position', 'fixed').css('top','0px').css('z-index','1000');
$('.first').css('padding-top','415');}
  else { 
$('#location_menu').css('position', 'relative').css('z-index','1');
 }});

私が抱えている問題は、スクロールがスムーズではなく、要素が position:relative から position:fixed に変更されると、コンテンツがサブメニューと同じ高さである約 415px ジャンプ/スキップするように見えることです。

CSSは次のとおりです。

 <div id="location_menu" >submenu content
 </div>

 <div id="content" class="location_detail first">content beneath submenu
 </div>

.firstページがスクロールしていて、ページの上部から 175 ピクセル以内に達したときに 415 ピクセルのパディングトップを設定するための行を追加しましたが、.css('padding-top','415')これは実際には何もしていないようです。変更はありませんので、間違って実行したと思います。

上記のスクロール機能とは別のスクロール機能を使用する必要がありますか?





@Danko のコードに基づいて、問題を解決するために最終的に使用したものは次のとおりです。

$(window).scroll(function () {
  var $conten = $('.first'),
      $menu = $('#location_menu')
      scrollpos = $(window).scrollTop();
  if (scrollpos >= 175) {
      $conten.css('padding-top','365px');
      $menu.css('position', 'fixed').css('top','0px').css('z-index','1000');
  } else {
      $conten.css('padding-top','0');
      $menu.css('position', 'fixed').css('position', 'relative').css('z-index','1');
  }
});
4

1 に答える 1

1

編集

質問を理解したので、このデモhttp://codepen.io/anon/pen/BdkLfを行いました。

実際の機能は次のとおりです。

$(window).scroll(function () {
  var $menu = $('#location_menu'),
      $conten = $('#content'),
      scrollpos = $(window).scrollTop();
  if (scrollpos >= 175) {
      $menu.css( {
        "top" : "0",
        "position": "fixed",
      });
      $conten.css('top','375px' );
  } else {
      $menu.css( {
        "position": "relative",
        "top" : "175px",
      });
      $conten.css('top','175px');
  }
});

ここで175は、上部からの最初の距離に等しく、距離とメニュー375の の間の追加ですheight

于 2013-10-24T19:21:19.230 に答える