66

position:fixed要素に適用すると、ドキュメントの通常のフローから除外されるため、親要素の幅は考慮されません。これがパーセンテージとして宣言されている場合、親の幅を継承させる方法はありますか? （以下の使用例）

let widthis = $('.box').width();
$('.dimensions').text(`width is ${widthis}`);

$('button').on('click', function() {
  $('.box').toggleClass('fixed');
  let widthis = $('.box').width();
  $('.dimensions').text(`width is ${widthis}`);
});
.container {
  max-width: 500px;
  height: 1000px;
}

.box {
  background-color: lightgreen;
}

.fixed {
  position: fixed;
}

.col-1 {
  border: 1px solid red;
  float: left;
  width: 29%;
}

.col-2 {
  border: 1px solid pink;
  float: left;
  width: 69%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click this to toggle position fixed for the left column</button>
<div class="container">
  <div class="col-1">
    <div class="box">
      fixed content<br>
      <span class="dimensions"></span>
    </div>
    </div>
  
  <div class="col-2">
    some other content
    </div>
  </div>

4

8 に答える 8

51

これは興味深い課題です。これに取り組むには、まずfixed実際に何が行われるかを理解する必要があります。

固定を理解する

とは異なりabsolute、最も近い相対的な親fixed から自身を配置しません。代わりにfixed 、ビューポートを基準にして自身を配置します。ビューポートは常に固定されたままなので、その効果が得られます。

そうは言っても、幅を「継承」するたびに、それはビューポートに対応します。したがって、ターゲット要素の幅をその親の幅に設定しようとすると、うまくいきません。

positionのさまざまな動作について詳しく学んでください。

クイックソリューション

これを修正するには、2 つの方法があります。

純粋なCSS

純粋な CSSを使用してこの問題を解決できますが、事前に幅を知る必要があります。その親要素が300px;

.parent{
    width: 300px;
}

.parent .fixed_child{
    position: fixed;
    width: 300px;
}

JS

現在、モバイル デバイスでは、特に幅を設定する余裕はありません。親要素ではなくビューポートに相対的であるため、パーセンテージの使用も機能しません。JS を使用できます。この場合は jQuery を使用してこれを実現します。特定の瞬間に親の幅を常に設定する関数を見てみましょう。300px

 function toggleFixed () {
      var parentwidth = $(".parent").width();      
      $(".child").toggleClass("fixed").width(parentwidth);        
  }

CSS:

.fixed{
    position:fixed;
}

CodePenで表示

動的幅

それはいいことですが、ユーザーがまだページにいる間にウィンドウの幅が変更され、これで親要素が変更された場合はどうなりますか? 親は幅を調整できますが、子は関数が設定した設定幅のままです。これは、 jQuery のイベント リスナーで修正できます。 resize()まず、作成した関数を 2 つに分割する必要があります。

function toggleFixed() {
   adjustWidth();
   $(".child").toggleClass("fixed");
 }

 function adjustWidth() {
   var parentwidth = $(".parent").width();
   $(".child").width(parentwidth);
 }

各パーツを分離したので、個別に呼び出すことができます。固定と幅を切り替える元のボタン メソッドを含めます。

$("#fixer").click(
     function() {
       toggleFixed();
     });

また、サイズ変更イベント リスナーをウィンドウに追加します。

 $(window).resize(
     function() {
       adjustWidth();
     })

CodePenで表示

そこには！これで、ウィンドウのサイズが変更されたときにサイズが調整される固定要素ができました。

結論

私たちは、fixed位置とその限界を理解することで、この課題に取り組んできました。Absolute とは異なりfixed、ビュー ポートにのみ関連するため、その親の幅を継承できません。

これを解決するには、jQuery ではそれほど時間がかからなかった JS マジックを使用する必要があります。

場合によっては、さまざまな幅のデバイスをスケーリングする動的なアプローチが必要になります。ここでも、JS アプローチを採用しました。

于 2017-03-19T08:52:25.663 に答える
6

静的なオブジェクトは親からパーセンテージ幅を受け取っているため、幅が変化しています。オブジェクトを固定に設定すると、フローではなくなり、サイズが変更されます。

独自のナビゲーション メニューにサイズを設定する必要があり、要素が親から幅を取得することを期待しないでください。

.nav {
    position: fixed;
    width: 20%;
    border: 1px solid green;
    padding: 0px;
    list-style-type:none;
    background:lightblue;
}

http://tinker.io/3458e/5

于 2013-04-15T15:12:14.203 に答える
4

こんにちは、jquery を使用して幅を維持することもできます。例えば：

jQuery(function($) {
    function fixDiv() {
        var $cache = $('#your-element');
        var $width = $('#your-element').parent().width();
        if ($(window).scrollTop() > 100) {
            $cache.css({
                'position': 'fixed',
                'top': '10px',
                'width': $width
            });
        } else {
            $cache.css({
                'position': 'relative',
                'top': 'auto'
            });
        }
    }
    $(window).scroll(fixDiv);
    fixDiv();
 });
于 2015-07-09T10:12:23.307 に答える
2

<html>これは、 or<body>要素のデフォルトのマージンまたはパディングが原因である可能性があります。<body>静的な場合は、その時点での幅に基づいてサイズが変更されますが、変更さposition:fixedれると、ビューポートに関してサイズ変更されます。

そのため、デフォルトのマージン/パディングを削除すると、問題が修正されます (私の経験ではbody { margin:0; }修正されます)。修正されたときにサイズを変更する必要があります (のようにwidth:calc(n% - 5px);)。

于 2015-05-03T01:58:03.587 に答える
-3

width:auto;with 要素に追加してposition:fixed;、その幅を親要素の幅と等しくします。

于 2016-01-15T10:59:51.830 に答える