CSS: ตำแหน่งคงที่บนแกน x แต่ไม่ใช่ y?


104

มีวิธีแก้ไขตำแหน่งบนแกน x เท่านั้นหรือไม่? ดังนั้นเมื่อผู้ใช้เลื่อนขึ้นแท็ก div จะเลื่อนขึ้นไปด้วย แต่ไม่ใช่จากด้านหนึ่งไปอีกด้านหนึ่ง?


3
จะเป็นไรไหมถ้าฉันให้วิธีแก้ปัญหา JS สำหรับปัญหานี้
Starx

1
คุณต้องใช้จาวาสคริปต์เพื่อดำเนินการนี้
LostLin

@Starx - ไม่เพียง แต่ตกลงเท่านั้นที่จำเป็น :-)
Pete Wilson

ฉันเพิ่งตอบคำถามที่คล้ายกันซึ่งอาจมีมากกว่าในสิ่งที่คุณกำลังมองหา: stackoverflow.com/questions/8673560/…
Wex

ฉันรู้ว่าเป็นคำถามที่ค่อนข้างเก่า แต่คุณยังคงมีปัญหากับคำถามนี้อยู่หรือไม่?
Starx

คำตอบ:


58

มันเป็นเทคนิคง่ายๆโดยใช้สคริปต์ด้วย คุณสามารถตรวจสอบการสาธิตได้ที่นี่เช่นกัน

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

สาธิต :)


@PeteWilson โอเคตรวจสอบวิธีนี้
Starx

2
คุณคิดอย่างไรเกี่ยวกับการรับleftค่าที่จุดเริ่มต้นของฟังก์ชันเหมือนinit_left = $('#header').position()['left']หรือสิ่งที่คล้ายกัน
Pierre de LESPINAY

@PierredeLESPINAY ใช่จุดที่ดีมาก นั่นจะทำให้มีความยืดหยุ่นเพียงพอที่จะรองรับการเปลี่ยนแปลง
Starx

2
ฉันชอบโซลูชันนี้และเพิ่งใช้ด้วยตัวเอง ปัญหาอย่างหนึ่งที่ฉันพบคือการรีเฟรชนั้นขาด ๆ หาย ๆ เมื่อคุณเลื่อนอย่างราบรื่น (เช่น: โดยการลากแถบเลื่อน) ดูเหมือนว่าการรีเฟรชจาวาสคริปต์จะช้ากว่าการรีเฟรช css วิธีแก้ปัญหานี้หรือไม่?
jsarma

17

นี่เป็นกระทู้เก่า แต่ CSS3 มีวิธีแก้ปัญหา

position: sticky;

ดูที่โพสต์บล็อกนี้

สาธิต:

ภาพเคลื่อนไหวเหนียวตำแหน่ง css

และเอกสารนี้.


1
ใช้เวลานานในการหาวิธีแก้ปัญหานี้คำตอบของคุณตรงกับความต้องการของฉันในอุดมคติ
Christopher Shaw

6
สิ่งนี้ดีสำหรับสิ่งของในแนวตั้ง แต่ใช้ไม่ได้กับการเลื่อนในแนวนอน
Cullub

10
นี่ไม่ตอบคำถามเลย
Alohci

12

หากเดิมทีบล็อกของคุณอยู่ในตำแหน่งคงที่คุณอาจต้องลองทำเช่นนี้

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


8

ไม่เป็นไปไม่ได้ด้วย CSS ที่บริสุทธิ์ การวางตำแหน่งแบบนั้นจะแก้ไของค์ประกอบในวิวพอร์ต ฉันขอแนะนำให้แก้ไของค์ประกอบที่ด้านใดด้านหนึ่งของวิวพอร์ต (เช่นด้านบนด้านล่างซ้ายหรือขวา) เพื่อไม่ให้รบกวนเนื้อหาอื่น ๆ


7

ตอนนี้มือถือมีมากกว่า 70% จากตลาดอินเทอร์เน็ตคุณสามารถสร้างสิ่งที่ชาญฉลาดและตอบสนองเพื่อทำสิ่งนั้นได้

คุณสามารถสร้างสิ่งนี้ได้ง่ายมากโดยใช้เพียง css ใช้ overflow-x: scroll สำหรับคอนเทนเนอร์และ overflow-y: scroll สำหรับคอนเทนเนอร์อื่น คุณสามารถวางตำแหน่งองค์ประกอบคอนเทนเนอร์ได้อย่างง่ายดายด้วยความกว้าง: 100vw และความสูง: 100vh

คลิกกลางที่ตัวอย่างเพื่อทดสอบ ทำงานได้ดีที่สุดบนมือถือเนื่องจากคุณไม่เห็นแถบเลื่อน

body{max-width:100%}
*{box-sizing:border-box;}
.container{background:#ddd;overflow-y:scroll;width:500px;max-height:100vh;}
.header{background: pink;}
.body{background: teal;padding:20px;min-width: 100%;overflow:scroll;overflow-y:hidden;min-height:300px;}
.body >div{min-width:800px;}
<body>
  <div class="container">
    <div class="header">
       Button 1 > Button 2 > Button 3
    </div>
    <div class="body">
      <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
     </div>
    </div>
  </div>
</body>


ฉันไม่ชอบให้แถบเลื่อนด้านล่างมองเห็นได้เฉพาะเมื่อเลื่อนไปที่เท้าเท่านั้น ...
Fanky

บนเบราว์เซอร์มือถือจะไม่ปรากฏขึ้น ใน Chrome คุณสามารถซ่อนได้ด้วย CSS .yourclass::-webkit-scrollbar-track, .yourclass::-webkit-scrollbar-thumb {display:none;}นี้ ใน Firefox คุณสามารถซ่อนได้โดยวางไว้นอกoverflow:hiddenคอนเทนเนอร์ แต่นั่นเป็นอีกคำถามหนึ่งที่ได้รับคำตอบก่อนหน้านี้ฉันมั่นใจในสิ่งนั้น
EPurpl3

2

วิธีแก้ปัญหาของ Starx เป็นประโยชน์อย่างยิ่งสำหรับฉัน แต่ฉันมีปัญหาบางอย่างเมื่อพยายามใช้แถบด้านข้างแบบเลื่อนแนวตั้งกับมัน นี่คือรหัสเริ่มต้นของฉันตามสิ่งที่ Starx เขียน:

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

มันแตกต่างจากโซลูชันของ Starx เล็กน้อยเพราะฉันคิดว่าโค้ดของเขาออกแบบมาเพื่อให้เมนูลอยในแนวนอนแทนที่จะเป็นแนวตั้ง แต่นั่นเป็นเพียงการกัน ปัญหาที่ฉันมีกับโค้ดด้านบนคือในเบราว์เซอร์จำนวนมากหรือขึ้นอยู่กับการโหลดทรัพยากรของคอมพิวเตอร์การเคลื่อนไหวของเมนูจะขาด ๆ หาย ๆ ในขณะที่โซลูชัน css เริ่มต้นนั้นดีและราบรื่น ฉันให้เหตุผลนี้กับเบราว์เซอร์ที่เริ่มการทำงานของเหตุการณ์จาวาสคริปต์ช้ากว่าการใช้งาน 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% ของการเลื่อนเป็นแนวตั้งและมันน่ารำคาญกว่ามากเมื่อมันขาด ๆ หาย ๆ มากกว่าการเลื่อนในแนวนอน

นี่คือโพสต์ที่เกี่ยวข้องของฉันเกี่ยวกับเรื่องนี้หากฉันยังไม่หมดความอดทนของทุกคน: แก้ไขเมนูในทิศทางเดียวใน jquery


2

ฉันสะดุดกับโพสต์นี้โดยมองหาวิธีที่ดีในการทำให้ส่วนหัว / แถบนำทางอยู่ตรงกลางและตอบสนองต่อการเปลี่ยนแปลงขนาด

//CSS
.nav-container {
  height: 60px;  /*The static height*/
  width: 100%;  /*Makes it responsive to resizing the browser*/
  position: fixed;  /*So that it will always be in the center*/
}

//jQuery
$(window).scroll(() => {
  if ($(document).scrollTop() < 60) {
    $('.nav-container').css('top', $(document).scrollTop() * -1)
  }
})

ในขณะที่เราเลื่อนแถบจะเลื่อนขึ้นจากหน้าจอ หากคุณเลื่อนไปทางซ้าย / ขวามันจะคงที่


ขอบคุณพี่ชาย. สิ่งนี้ได้ผล เรียบง่ายมาก !! คุณอัจฉริยะ
ราม

0

ฉันรู้ว่าเธรดนี้เก่ามาก แต่ช่วยให้ฉันสามารถหาวิธีแก้ปัญหาสำหรับโครงการของฉันได้

ในกรณีของฉันฉันมีส่วนหัวที่ฉันไม่ต้องการให้มีความกว้างน้อยกว่า 1,000px ส่วนหัวจะอยู่ด้านบนเสมอโดยมีเนื้อหาที่ไปทางขวาได้ไม่ จำกัด

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

นอกจากนี้ควรจัดการเมื่อเบราว์เซอร์ของคุณมีขนาดเล็กกว่าส่วนหัวของความกว้างต่ำสุด


0

ฉันเพิ่งเพิ่มตำแหน่ง: สัมบูรณ์และนั่นช่วยแก้ปัญหาของฉันได้


8
การกำหนดตำแหน่งที่แน่นอนจะแก้ไของค์ประกอบที่สัมพันธ์กับเอกสาร การวางตำแหน่งคงที่จะแก้ไขเมื่อเทียบกับหน้าต่าง หากการใช้สัมบูรณ์แก้ไขปัญหาของคุณแสดงว่าคุณไม่มีปัญหาเหมือนกับคำถามนี้ในการเริ่มต้น
Niall

0

นี่เป็นกระทู้เก่ามาก แต่ฉันพบโซลูชัน 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;
}

6
วิธีการแก้ปัญหาของคุณต้องการการเลื่อน div คอนเทนเนอร์ของเนื้อหาแทนหน้าต่างจริงซึ่งอยู่ไกลจากอุดมคติ - ซอของคุณแสดงให้เห็นว่าทำไม เนื้อหาของคุณกำลังวิ่งออกจากด้านขวามือของหน้า แต่แถบเลื่อนแนวนอนไม่อยู่บนหน้าจอ นั่นเป็นปัญหาใหญ่ในการใช้งาน
Niall

0

อัปเดตสคริปต์เพื่อตรวจสอบตำแหน่งเริ่มต้น:

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

}




0
$(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
    });
});

ขอบคุณ


0

ใช่คุณสามารถทำได้โดยใช้ CSS เท่านั้น ...

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

บอกฉันว่ามันได้ผล



-3

ดูเหมือนว่าคุณต้องใช้ตำแหน่ง: คงที่แล้วตั้งค่าตำแหน่งบนสุดเป็นเปอร์เซ็นต์และตำแหน่งซ้ายหรือขวาเป็นหน่วยคงที่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.