css - top - 網頁header固定




當position:fixed應用時,是否可以保持父元素的寬度? (6)

當我們應用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>


嗨你也可以使用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();
 });

寬度正在改變,因為靜態時的對像從其父級接收其百分比寬度。 將對象設置為fixed後,它將不再處於流動狀態並調整大小。

你必須自己設置導航菜單的大小,而不是指望元素從父級獲得寬度。

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

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


正如有人已經建議的那樣,使用javascript是最好的解決方案。

沒有jQuery。

const parentElement = document.querySelector('.parent-element');
const fixedElement = document.querySelector('.fixed-element');

// get parent-element width when page is fully loaded
// and change fixed-element width accordingly
window.addEventListener('load', changeFixedElementWidth);

// get parent-element width when window is resized
// and change fixed-element width accordingly
window.addEventListener('resize', changeFixedElementWidth);

function changeFixedElementWidth() {
  const parentElementWidth = parentElement.getBoundingClientRect().width;
  fixedElement.style.width = parentElementWidth + 'px';
}

添加width:auto;position:fixed;的元素position:fixed; 使其寬度等於其父元素的寬度。


這可能是因為<html><body>元素上的某些默認邊距或填充。 當它是靜態的時,它的大小基於當時的<body>的寬度,但是當它變為position:fixed它相對於視口的大小。

因此,刪除默認的邊距/填充應該可以解決問題(在我的體驗中body { margin:0; }修復它),因為在修復它時應該更改大小(如width:calc(n% - 5px); )。


這是一個有趣的挑戰。 要解決這個問題,我們首先應該了解實際fixed

了解固定

absolute不同, fixed 不會將其自身定位於其最接近的親屬 。 而是相對於視口 fixed 自身位置 。 視口將始終保持固定,這就是您獲得效果的原因。

話雖這麼說, 每當你“繼承”任何寬度時,它都將與視口相對應 。 因此,當我們嘗試將目標元素的寬度設置為其父元素的寬度時,這對我們沒有好處。

詳細了解不同的position行為。

快速解決方案

有兩種方法可以解決這個問題。

純CSS

我們可以使用純CSS來解決這個問題,但我們需要提前知道寬度 。 假設它的父元素是300px;

.parent{
    width: 300px;
}

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

JS

現在有了移動設備 ,我們並沒有真正擁有 設置寬度的奢侈品,特別是300px以上的任何東西。 使用百分比也不起作用,因為它將相對於視口而不是父元素。 我們可以使用JS ,在這種情況下使用jQuery來實現這一點 。 讓我們看一下在給定時刻總是設置paren t 寬度的 函數

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

CSS:

.fixed{
    position:fixed;
}

CodePen查看

動態寬度

這很好,花花公子,但如果窗口的寬度在用戶仍在頁面上時發生變化,用這個更改父元素會發生什麼? 當父級可以調整其寬度時,子級將保持函數設置它的設置寬度。 我們可以使用jQuery's resize()事件監聽器來解決這個問題 。 首先,我們需要將我們創建的函數拆分為兩個:

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

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

現在我們已經分開了每個部分,我們可以單獨調用它們,我們將包括切換固定和寬度的原始按鈕方法:

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

現在我們還將resize事件監聽器添加到窗口:

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

CodePen查看

那裡! 現在我們有一個固定元素,當調整窗口大小時,將調整大小。

結論

我們通過了解fixed位置及其局限性來應對這一挑戰。 與Absolute不同, fixed僅與視口相關,因此無法繼承其父級的寬度。

為了解決這個問題,我們需要使用一些JS魔法來實現這一點,它不需要花費很多jQuery。

在某些情況下,我們需要一種動態方法,可以擴展不同寬度的設備。 我們再次採用JS方法。







css-position