CSS：在x軸上的固定位置，但不是y？

Question

有沒有辦法只在x軸上固定一個位置？所以當用戶向上滾動時，div標籤會向上滾動，但不是左右搖擺？

Answer 1

聽起來像你需要使用的位置：固定，然後將頂部的位置設置爲百分比，並將左側或右側位置設置爲固定單位。

Answer 2

不，純CSS不可能。這種定位可以修復視口中的元素。我建議將元素固定到視口的一側（即頂部，底部，左側或右側），以免干擾其他內容。

Answer 3

它也是一種簡單的使用腳本的技巧。您也可以查看演示here。

JQuery的

$(window).scroll(function(){ 
    $('#header').css({ 
     'left': $(this).scrollLeft() + 15 
     //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left 
    }); 
}); 

CSS

#header { 
    top: 15px; 
    left: 15px; 
    position: absolute; 
} 

---

更新信用：@PierredeLESPINAY

至於評論，使腳本支持在CSS中的變化而不必在腳本中重新編碼它們。您可以使用以下內容。

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first 
$(window).scroll(function(){ 
    $('#header').css({ 
     'left': $(this).scrollLeft() + leftOffset //Use it later 
    }); 
}); 

Demo :)

Answer 4

Starx的解決方案是對我非常有幫助。但是當我嘗試使用垂直滾動邊欄時，我遇到了一些問題。這是我最初的代碼，基於什麼Starx寫道：

function fix_vertical_scroll(id) { 
    $(window).scroll(function(){ 
     $(id).css({ 
      'top': $(this).scrollTop() //Use it later 
     }); 
    }); 
} 

這是一個從Starx的解決方案略有不同，因爲我覺得他的代碼被設計爲允許一個菜單水平，而不是垂直浮動。但這只是一個例外。我在上面的代碼中遇到的問題是，在很多瀏覽器中，或者根據計算機資源的負載情況，菜單移動會變得不穩定，而最初的css解決方案非常流暢。我將這歸因於瀏覽器在執行javascript事件時比在執行css時慢。

我對這個不連續問題的替代解決方案是將框架設置爲固定而不是絕對，然後使用starx的方法取消水平移動。

function float_horizontal_scroll(id) { 
    jQuery(window).scroll(function(){ 
     jQuery(id).css({ 
      'left': 0 - jQuery(this).scrollLeft() 
     }); 
    }); 
} 

#leftframe { 
position:fixed; 
width: 200; 
} 

你可能會說我正在做的就是交易垂直滾動不連續的橫向滾動不規則。但事實是，99％的滾動是垂直的，當橫向滾動時，這比橫向滾動時更加惱人。

這是我在這個問題上的相關帖子，如果我沒有已經是疲憊不堪了大家的耐心：Fixing a menu in one direction in jquery

Answer 5

我意識到這線程是強大的舊的，但它幫助我拿出我的項目的解決方案。

在我的情況下，我有一個標題，我想永遠不會少於1000像素寬，標題總是在頂部，內容可以無限制的權利。

header{position:fixed; min-width:1024px;} 
<header data-min-width="1024"></header> 

    $(window).on('scroll resize', function() { 
     var header = $('header'); 
     if ($(this).width() < header.data('min-width')) { 
      header.css('left', -$(this).scrollLeft()); 
     } else { 
      header.css('left', ''); 
     } 
    }); 

當您的瀏覽器是小於你的頭最小寬度

Answer 6

我剛添加的位置也應該處理：絕對的，解決我的問題。

Answer 7

這是一個非常古老的線程，但我發現了一個純粹的CSS解決方案，使用一些創造性的嵌套。我是不是在所有的jQuery的方法是...的粉絲

小提琴這裏： https://jsfiddle.net/4jeuv5jq/

<div id="wrapper"> 
    <div id="fixeditem"> 
     Haha, I am a header. Nah.. Nah na na na 
    </div> 
    <div id="contentwrapper"> 
     <div id="content"> 
      Lorem ipsum..... 
     </div> 
    </div> 
</div> 

#wrapper { 
position: relative; 
width: 100%; 
overflow: scroll; 
} 

#fixeditem { 
position: absolute; 
} 

#contentwrapper { 
width: 100%; 
overflow: scroll; 
} 

#content { 
width: 1000px; 
height: 2000px; 
} 

Answer 8

更新的腳本來檢查起始位置：

function float_horizontal_scroll(id) { 
var el = jQuery(id); 
var isLeft = el.css('left') !== 'auto'; 
var start =((isLeft ? el.css('left') : el.css('right')).replace("px", "")); 
jQuery(window).scroll(function() { 
    var leftScroll = jQuery(this).scrollLeft(); 
    if (isLeft) 
     el.css({ 'left': (start + leftScroll) + 'px' }); 
    else 
     el.css({ 'right': (start - leftScroll) + 'px' }); 
}); 

}

Answer 9

如果您想在右側修復它，例如，請使用justify-content: flex-end。

更多：http://www.w3schools.com/cssref/css3_pr_justify-content.asp

Answer 10

如果你的塊最初定位爲靜態的，你可能會想嘗試這種

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

 
    var $w = $(window); 
 
    $('.position-fixed-x').css('left', $w.scrollLeft()); 
 
    $('.position-fixed-y').css('top', $w.scrollTop()); 
 

 
});

.container { 
 
    width: 1000px; 
 
} 
 

 
.position-fixed-x { 
 
    position: relative; 
 
} 
 

 
.position-fixed-y { 
 
    position: relative; 
 
} 
 

 
.blue-box { 
 
    background:blue; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.red-box { 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
<div class="position-fixed-y red-box"> 
 
    
 
</div> 
 

 
The pattern of base pairs in the DNA double helix encodes the instructions for building the proteins necessary to construct an entire organism. DNA, or deoxyribonucleic acid, is found within most cells of an organism, and most organisms have their own unique DNA code. One exception to this is cloned organisms, which have the same exact DNA code as their parents do. 
 

 
<div class="position-fixed-x blue-box"> 
 
    
 
</div> 
 

 
DNA strands are composed of millions of sub-units, called nucleotides. Each nucleotide contains a 5-carbon sugar, a phosphate group and a nitrogen base. There are four different variations of the nitrogen base group, responsible for all of the variation between two different DNA strands. The four different variations are called adenine, guanine, cytosine and thymine, but they are typically abbreviated and only referred to by their first letter. The sequence of these different nitrogen bases makes up the code of the DNA. 
 

 
The DNA strand splits in two, and forms two different DNA strands during cell replication. However, sometimes this process is not perfect, and mistakes occur. These mistakes may change the way an organism is constructed or functions. When this happens, it is called a mutation. These mutations can be helpful or harmful, and they are usually passed on to the organism’s offspring. 
 
    
 
The traits of a living thing depend on the complex mixture of interacting components inside it. Proteins do much of the chemical work inside cells, so they largely determine what those traits are. But those proteins owe their existence to the DNA (deoxyribonucleic acid), so that is where we must look for the answer. 
 
The easiest way to understand how DNA is organized is to start with its basic building blocks. DNA consists of four different sugars that interact with each other in specific ways. These four sugars are called nucleotide bases and have the names adenine (A), thymine (T), cytosine (C) and guanine (G). Think of these four bases as letters in an alphabet, the alphabet of life! 
 
If we hook up these nucleotides into a sequence--for example, GATCATCCG--we now have a little piece of DNA, or a very short word. A much longer piece of DNA can therefore be the equivalent of different words connected to make a sentence, or gene, that describes how to build a protein. And a still longer piece of DNA could contain information about when that protein should be made. All the DNA in a cell gives us enough words and sentences to serve as a master description or blueprint for a human (or an animal, a plant, or a microorganism). 
 
Of course, the details are a little more complicated than that! In practice, active stretches of DNA must be copied as a similar message molecule called RNA. The words in the RNA then need to be "read" to produce the proteins, which are themselves stretches of words made up of a different alphabet, the amino acid alphabet. Nobel laureates Linus Pauling, who discerned the structure of proteins, and James Watson and Francis Crick, who later deciphered the helical structure of DNA, helped us to understand this "Central Dogma" of heredity--that the DNA code turns into an RNA message that has the ability to organize 20 amino acids into a complex protein: DNA -> RNA -> Protein. 
 
To understand how this all comes together, consider the trait for blue eyes. DNA for a blue-eyes gene is copied as a blue-eyes RNA message. That message is then translated into the blue protein pigments found in the cells of the eye. For every trait we have--eye color, skin color and so on--there is a gene or group of genes that controls the trait by producing first the message and then the protein. Sperm cells and eggs cells are specialized to carry DNA in such a way that, at fertilization, a new individual with traits from both its mother and father is created. 
 
</div>

Answer 11

在父DIV您可以添加

overflow-y: scroll; 
overflow-x: hidden; 

Answer 12

這是一箇舊的線程，但CSS3有一個解決方案。

position: sticky; 

Have a loot at this blog post.

And this documentation.

Answer 13

$(window).scroll(function(){ 
    $('#header').css({ 
     'left': $(this).scrollLeft() + 15 
     //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left 
    }); 
}); 

感謝

Answer 14

非常簡單的解決方法是：

window.onscroll = function(){ 
    document.getElementById('header').style.left= 15 - (document.documentElement.scrollLeft + document.body.scrollLeft)+"px"; 
} 

Answer 15

是的，實際上，你可以做到這一點只能通過使用CSS ...

body { width:100%; margin-right: 0; margin-left:0; padding-right:0; padding-left:0; } 

告訴我，如果它的工作原理