CSS:y軸ではなくx軸上の固定位置?


104

X軸の位置のみを固定する方法はありますか?したがって、ユーザーが上にスクロールすると、divタグは一緒に上にスクロールしますが、左右にスクロールしませんか?


3
この問題にJSソリューションを提供しても大丈夫ですか?
Starx

1
これを行うにはJavaScriptが必要です。
LostLin

@Starx-それはOKであるだけでなく、必須です:-)
ピートウィルソン

:私は最近、より多くのあなたが探しているものの線に沿ってあるかもしれない同様の質問答えstackoverflow.com/questions/8673560/...
WEX

私はかなり古い質問を知っていますが、この質問でまだ問題がありますか?
Starx 2012年

回答:


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、OKこのソリューションをチェック
Starx

2
left関数の最初のような値を取得することについてどう思いますinit_left = $('#header').position()['left']か?
Pierre de LESPINAY 2012

@PierredeLESPINAY、はい、非常に良い点です。これにより、変更をサポートするのに十分な柔軟性が得られます。
Starx

2
私はこのソリューションが大好きで、自分で使用しました。しかし、私が抱えている問題の1つは、スムーズなスクロール(スクロールバーのドラッグなど)を実行すると、更新が途切れ途切れになることです。JavaScriptの更新はCSSの更新より遅いようです。これに対する解決策はありますか?
jsarma 2013

17

これは古いスレッドですが、CSS3には解決策があります。

position: sticky;

このブログ投稿をご覧ください。

デモンストレーション:

CSS位置付箋アニメーション

そして、このドキュメント。


1
これに対する解決策を見つけるのに費やした年齢、あなたの答えは私のニーズに理想的に適合しています。
クリストファーショー

6
これは垂直方向には便利ですが、水平方向のスクロールには機能しません。
Cullub 2018年

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>


一番下のスクロールバーが足までスクロールしたときにのみ表示されるのが好きではありません...
ファンキー

モバイルブラウザでは表示されません。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の実装よりもJavaScriptイベントの起動が遅いことに起因します。

このチョップネスの問題に対する別の解決策は、フレームを絶対ではなく固定に設定してから、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)
  }
})

スクロールすると、バーが画面の上方に移動します。左/右にスクロールすると、固定されたままになります。


兄さん、ありがとう。これはうまくいきました。とてもシンプルですが!! Genius you
Ram

0

このスレッドは非常に古くなっていることに気づきましたが、プロジェクトの解決策を見つけるのに役立ちました。

私の場合、幅が1000pxを下回らないようにしたいヘッダーがあり、ヘッダーは常に上にあり、無制限に正しく実行できるコンテンツがありました。

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

position:absoluteを追加しただけで、問題は解決しました。


8
絶対配置は、ドキュメントに対して要素を修正します。固定位置は、ウィンドウに対してそれらを修正します。絶対を使用して問題を解決した場合は、最初にこの質問と同じ問題はありませんでした。
Niall、2015

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、2015

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

親divに追加できます

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

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

うまくいくか教えてください


-1

非常に簡単な解決策は次のとおりです。

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

position:fixedjsソリューションに行くのではなく、CSS3 を使用する必要があります
Muhammad Omer Aslam

-3

position:fixedを使用してから、上部の位置をパーセンテージに設定し、左または右の位置を固定単位に設定する必要があるように聞こえます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.