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

有没有办法只在x轴上固定一个位置？ 所以当用户向上滚动时，div标签会向上滚动，但不是左右摇摆？

Answer 1

它也是一个使用脚本的简单技术。 你也可以在这里查看演示。

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 }); }); 

演示 🙂

Answer 2

不，用纯CSS是不可能的。 这种定位可以修复视口中的元素。 我build议只需将元素固定到视口的一侧（即顶部，底部，左侧或右侧），以免干扰其他内容。

Answer 3

如果你的块最初被定位为静态，你可能想尝试这个

 $(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 4

Starx的解决scheme对我非常有帮助。 但是当我尝试使用垂直滚动边栏时，我遇到了一些问题。 这是我最初的代码，基于Starx写的：

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

这与Starx的解决scheme略有不同，因为我认为他的代码旨在让菜单水平浮动而不是垂直浮动。 但是，这只是一个旁观。 我在上面的代码中遇到的问题是，在很多浏览器中，或者根据计算机的资源负载，菜单的移动会变得不稳定，而最初的css解决scheme很好，很stream畅。 我将这归因于浏览器在执行css时触发JavaScript事件的速度较慢。

我对这个不稳定问题的替代解决scheme是将框架设置为固定而不是绝对的，然后使用starx的方法取消水平运动。

 function float_horizontal_scroll(id) { jQuery(window).scroll(function(){ jQuery(id).css({ 'left': 0 - jQuery(this).scrollLeft() }); }); } #leftframe { position:fixed; width: 200; } 

你可能会说我正在做的是横向滚动choppiness交易垂直滚动choppiness。 但事实是，99％的滚动是垂直的，当横向滚动比起横向滚动时更为恼人。

这里是我在这个问题上的相关post，如果我还没有用尽每个人的耐心： 在jquery中修复菜单在一个方向

Answer 5

这是一个非常古老的线程，但我发现了一个纯粹的CSS解决scheme，使用一些创造性的嵌套。 我根本不是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 6

这是一个古老的线程，但CSS3有一个解决scheme。

 position: sticky; 

在这个博客文章中有一个掠夺。

和这个文件。

Answer 7

我意识到这个线程是伟大的，但它帮助我为我的项目提出一个解决scheme。

在我的情况下，我有一个标题，我想永远不会less于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 8

我刚刚添加的位置：绝对，这解决了我的问题。

Answer 9

更新了脚本来检查开始位置：

 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 10

例如，如果您想在右侧修复它，请使用justify-content: flex-end 。

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

Answer 11

在父div上，你可以添加

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

Answer 12

 $(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 13

听起来像你需要使用的位置：固定，然后将顶部的位置设置为百分比，并将左侧或右侧位置设置为固定单位。