如何更改滾動的元素寬度？

我在編碼方面很新穎，現在我正在做一個小型學校任務，其中的想法是創建一個服務站點。如何更改滾動的元素寬度？

我想從側面製作一個臉部，鼻子從左到右生長 - （如同匹諾曹）滾動頁面時。

也許我寫的代碼將有助於解釋什麼，我想更準確地做......

我的問題是：我應該怎麼做纔能有我的鼻子元固定爲中心的左側，並且變得越來越滾動時更多的權利？當我將位置固定時，我的鼻子元素消失了。

這是我的靈感/代碼源 - >http://jsfiddle.net/95EtZ/11/

歡迎任何幫助，謝謝！

HTML

<!DOCTYPE html> 
<html> 
<head>  
    <link rel="stylesheet" href="main.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/ 
jquery.min.js"></script> 
</head> 
<body> 
    <div id="added"> 
    <div id="container"></div> 
    </div> 
</body> 
</html>

CSS

#added { 
    background: white; 
    height: 1500px; 
    overflow: hidden; 
    position: relative; 
} 

#container { 
    width: 600px; 
    height: 100px; 
    background-color: #567; 
    margin: 0 auto; 
    position: relative; 
}

的JavaScript

$(function(){ 
    var Node = $('#container'), 
     BaseWidth = Node.width(); 

    $(window).resize(function() { 
    $('#container').css({ 
     top: ($(window).height() - $('#container').outerHeight())/2 
    }); 
    }); 

    $(window).resize(); 

    var $scrollingDiv = Node; 

    $(window).scroll(function() { 
    var winScrollTop = $(window).scrollTop() + 0, 
     zeroSizeHeight = $(document).height() - $(window).height(), 
     newSize = BaseWidth * (1 - (winScrollTop/zeroSizeHeight) * (2/3)); 

    Node.css({ 
     width: newSize, 
     "marginTop": winScrollTop + "px"  
    }); 
    }); 
});

來源

2017-04-30 gjgff

您正在使用'margin：0 auto'，這會導致元素水平居中。簡單地刪除這個屬性將會使你的增長/縮小容器放置在視口的左邊。沒有必要聲明一個浮點數：http://jsfiddle.net/1xqzwd8j/ – Terry

謝謝！你知道爲什麼當我滾動（在Safari和Chrome中）時，我的元素非常「不穩定」，它有點向前和向後閃爍。我想使用100px的高度和600px的寬度。下面是該問題的演示：http://jsfiddle.net/1xqzwd8j/2/ 有什麼建議嗎？ – gjgff

不幸的是我無法重現你的問題，我根本沒有看到任何閃爍......如果你可以包含一個gif來解釋你所看到的效果，那將會很棒。 – Terry

只是要在div浮動左，它應該工作。

#container { 
    width: 600px; 
    height: 2000px; 
    background-color: #567; 
    margin: 0 auto; 
    position:relative; 
    float:left;  
}

來源

2017-04-30 21:33:56 shawn

如何更改滾動的元素寬度？

回答

相關問題