質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1489閲覧

IEでposition: stickyが使えないので別の方法でスクロール時に要素を追従させたい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/07/16 18:29

編集2018/07/16 18:33

Chromeなどの一部ブラウザでposition: stickyを使うと指定した要素がスクロールとともに追従してくれます。

しかし、IEとEdgeではサポートしていないとのこと。

どうにかCSSのみで同じ動作をさせることはできないでしょうか?

「現状」

<HTML> ```ここに言語を入力 <header> <!-- line --> <div class="line"></div> <!-- line --> <nav> <!-- ham-menu --> <div id="ham-menu"> <ul> <li class="menu01"><a href="concept.html"><span class="menu_title">コンセプト</span><br> <span class="menu_subtitle">CONCEPT</span></a></li> <li class="menu02"><a href="flow.html"><span class="menu_title">制作の流れ</span><br> <span class="menu_subtitle">FLOW</span></a></li> <li class="menu03"><a href="price.html"><span class="menu_title">料金</span><br> <span class="menu_subtitle">PRICE</span></a></li> <li class="menu04"><a href="company.html"><span class="menu_title">会社概要</span><br> <span class="menu_subtitle">COMPANY</span></a></li> <li class="menu05"><a href="contact.html"><span class="menu_title">お問い合わせ</span><br> <span class="menu_subtitle">CONTACT</span></a></li> </ul> </div> <!-- ham-menu --> </nav> </header> <!-- main_box --> <section id="main_box"> <!-- main_slide --> <div class="main_slide"> <!-- slide --> <div class="slide"><img src="img/slider/slide1.jpg" alt="img1"> <img src="img/slider/slide2.jpg" alt="img2"> <img src="img/slider/slide3.jpg" alt="img3"> <img src="img/slider/slide4.jpg" alt="img4"></div> <!-- slide --> </div> <!-- main_slide --> </section> <!-- main_box --> ``` <CSS> ```ここに言語を入力 /*ビューエリアの最小幅。このサイズより大きい場合に適用*/ @media all and (min-width: 668px) { header { background-color:#fff; padding-bottom:20px; width: 100%; /* 長さ */ position: fixed; top: 0; /* 固定する位置 */ left: 0; /* 固定する位置 */ right: 0; /* 固定する位置 */ box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); z-index:1; }

h1 {
width:250px;
height:70px;
background-image:url("../img/logo.jpg");
background-repeat:no-repeat;
margin-right:20px;
}
h1 span {
display:none;
}
h1 a {
display:block;
width:250px;
height:100%;
}

.line {
width:100%;
padding-top:10px;
background:#43A1E1;
}

nav {
padding-top:20px;
margin:0 auto; /* ブロック要素の中央揃え /
max-width:900px;
scroll-behavior: smooth;
display: -webkit-flex;
display: flex; /
flexコンテナ化 /
flex-direction: row; /
横向きに配置 /
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
nav ul {
list-style:none;
text-align:center;
max-width:900px;
display: -webkit-flex;
display: flex; /
flexコンテナ化 /
flex-direction: row; /
横向きに配置 */
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
nav .menu01, .menu02, .menu03, .menu04, .menu05 {
width:126px;
background-color:#FFF;
font-weight:bold;
}
nav .menu01, .menu02, .menu03, .menu04, .menu05 {
border-left: solid 1px #CCC;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
nav a {
width:100%;
display:block;
}

nav .menu_title {
color:#43A1E1;
font-family:M2b;
}

nav .menu_subtitle {
color:#CCC;
line-height:3em;
font-family:M2p;
}
nav a:link {
color: #333;
}
nav a:visited {
color: #333;
}
nav a:hover {
color: #333;
}
nav a:active {
color: #333;
}
a {
text-decoration:none;
}

#main_box {
margin-top:122px;
}

/スライダー/
/*=== 画像の表示エリア =================================(画像サイズ1160px X 600px) */

.main_slide {
position : relative;
overflow:hidden;
padding-top:122px;
margin:0 auto;
background:#f0f0f0;
}

.slide {
height: 51.7vw;
max-height: 600px;
}

.slide img {
max-width: 102%;
display: block;
position : absolute;
left:100%;
animation : slideAnime 16s ease infinite;
margin-left: 50%;
transform: translateX(-50%);
vertical-align:bottom;
}
/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }
.slide img:nth-of-type(3) { animation-delay: 8s }
.slide img:nth-of-type(4) { animation-delay: 12s }

/*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
0% { left: 100% }
2% { left: 0 }
23% { left: 0 }
25% { left: -100% }
100% { left: -100% }
}
}

IEやEdgeに対応していないのでstickyの使用をやめ、 position: fixed; を使いました。 そして、ナビゲーションバーの高さ分、スライドショーのところで ```ここに言語を入力 #main_box { margin-top:122px; }

として余白を付けました。
そうすることでスクロールするとナビゲーションバーが追従するようにはなったのですが、
スクロールしない初期状態でブラウザの画面を縮めるとナビゲーションバーが2段になったりするのですが、
その場合はスライドショーの画像にかぶってしまいます。
stickyではそういうことは起きず、ナビゲーションバーが画像にかぶらずに2段になってくれます。

「position: fixed;を使ったナビゲーションバー通常画面」
イメージ説明

「position: fixed;を使いIEのブラウザを縮めた場合」
イメージ説明

やはり、IEやEdgeではJqueryのStickyfillなどを使うしかないのでしょうか…。

また、

position: fixed;

を使うと、IEやEgdeではなぜか、スライドショーで表示されてはいけない画像がほんの少し見えてしまっています。
先ほどの画像の左端の黄色の部分。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

IEとEdgeではサポートしていないとのこと。

ie11は未対応ですが、Edgeは対応しています。

参考
Can I use position: sticky ?


CSSのみで同じ動作をさせることはできないでしょうか?

現状は出来ないと思います。

投稿2018/07/16 22:23

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/07/17 01:57

ありがとうございます。参考になります。
yoshinavi

2018/07/17 02:03

Edgeがあるので難しいのでしょうが、ie11も、日本では利用者が多いブラウザですから、何とか対応してもらいたいものですけどね。 (^^)
退会済みユーザー

退会済みユーザー

2018/07/17 03:08

そうですねー。私もIEでの特殊な記述等やデザインの崩れが今難題です(汗 ちょっと気になった事があるのでまた質問させて頂くかもしれませんが、もし目に付きまして、「答えてやるか」と思ったらまたよろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問