一部のコンテンツがスクロールに追従する方法を探しています。

Question

前提・実現したいこと

最近、ウェブページの作成を行い始めた初心者です。
上手く説明できない点が多々あるかとは思いますが、
皆さまの知恵をお借りしたいと思い、質問させていただきます。

2カラムのウェブページを作成しており、
html及びcssは、フリーのテンプレを使用させていただいております。
サブコンテンツとしてバナーの設置をしようとしているのですが、
スクロールに追従するようにしたいと考えています。

以下に記載の理由から、position:sticky;を使用しないで、
スクロール追従にできる方法がないか探しています。

発生している問題・エラーメッセージ

どうすればよいのか調べていたところ、position:sticky;の使用を推奨している方が多かったため、
詳細を確認してみたところ、要素にoverflow:hidden;が設定されているため、
効かないということがわかりました。

文字が隠れてしまうほど文章量が多いわけではないのですが、
レスポンシブ対応にしているため、横スクロールをしないような構成にしたいので、
hiddenではなくautoやscroll、visibleにすることは考えておりません。
（cssを変更したことにより、レイアウトが崩れてしまうことは避けたいと思っています。）

抜粋ですが、必要と思われる箇所を掲載してみます…
（ファイル名を特定されないものに変更した状態です）

※ご指摘を受けました.submenuのコンテンツですが、
今回の作成では使用していないものでした。
そのため、該当箇所は削除させていただきました。
（+<div id="contents">の箇所も削除させていただきました。）

HTML

<div id="sub">
　　<ul class="bnr">
	<li>
	<img src="image.png" alt="" class="auto-style4" style="width: 98%"></li>
	<li><a href="index.html">
　　　　<img src="image.jpg" alt="" class="auto-style4" style="width: 98%"></a>
　　</li>
　　</ul>
</div><!-- /#sub -->

CSS
}

#sub {
	box-sizing: border-box;
	overflow: hidden;
	float: right;
	width: 28%;
	padding: 10px;
	background: #fff;
}

/*================================================
 *  サブコンテンツ
 ================================================*/
.bnr {
	overflow: hidden;
}
.bnr ul {
	overflow: hidden;
}
.bnr li {
	margin: 0 0 10px 0;
	padding: 0;
	list-style: none;
}
.bnr li a:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}
.bnr img {
	width: 100%;
}

試したこと

・classを新たに設けて、公開されているコードを試したのですが、
親要素でhiddenが使用されているため無効でした。
・親要素に依存しないように、新たに属性？を設けたのですが、
レイアウトが崩れてしまい、お粗末な見た目になってしまいました。

補足情報（FW/ツールのバージョンなど）

Microsoft Expression Web4 を使用しております。

初めての作成で、知識も不十分なので説明不足であったり、
抜けていることも多いかとは思いますが、ご教授いただけると幸いです。

Comments

[x_x]

サブコンテンツ(.submenu)？の HTML は挙げられるでしょうか？

[shibakoppe]

反応していただきありがとうございます！
.submenuのコンテンツはリスト形式のものだったので、
今回は使用しておりません…。
subとつくCSSをそのまま掲載してしまったので、
余計にわかりにくくしてしまって、申し訳ありません…。

[x_x]

提示箇所がすべてサブコンテンツ(＝スクロールに追従したいところ)ということでしょうか？
つまりid="contents"ですが

[shibakoppe]

id="contents"にはid="sub"とid="main"が含まれていて、
スクロールに追従したい箇所としてはid="sub"のみのため、
cssもsubに関する箇所のみとさせていただきました。
提示の仕方が中途半端で申し訳ありません。

[x_x]

親要素に依存しないのであれば、position: fixed; でいいのではないかと思うのですが、それがいけない理由（スクロールしたいなど）はあるでしょうか？

[shibakoppe]

ご丁寧にありがとうございます。
position: fixed;にしてしまうと、スマホやタブレット等で閲覧した際に、本来見てもらいたいメインのコンテンツにかぶってしまいます。
スマホ等の場合、サブコンテンツ→メインコンテンツの順で縦長に表示されるようにしているので、かぶってしまうというか、メインが小さいというか…
上手く表現が出来なくて申し訳ありません。
例えばなのですが、スマホ向けのCSSではposition: fixed;にしなければよいのでしょうか？

[x_x]

メディアクエリを使って、ある幅以上のときのみ fixed にすることは可能ですね。それで目的は達成されるのでしょうか？

[shibakoppe]

スマホサイズの時はスクロールとともに見えなくなって、デスクトップやタブレットサイズの時は追従させることができるという解釈でいいのでしょうか…？
もしそうなのでしたら、目的達成です…！

Answer 1

幅 768px でわける例

@media (min-width: 768px) {
  #sub {
    position: fixed;
    top: 10px;
    right: 10px;
  }
}

https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

Comments

[shibakoppe]

無事できました！！
ありがとうございます…！！
説明不足も多く、知識も乏しかったため、
お手を煩わせてしまい、大変申し訳ございませんでした…。
一からご丁寧に対応してくださったので、こちらの方をベストアンサーとさせていただきます！
本当にありがとうございました！！

Answer 2

多分これでいけると思います。

.parentClass{
   overflow: visible !important;
}
.childBannerClass{
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}

!important

編集出来ない別のCSSファイルのプロパティ値を変更したい場合、こちら側で上書きする方法があります。

プロパティの末尾に!impprtantと記述する事で、その値が最優先されます。

セレクターの詳細度やCSSの読込み順に関係なく、!impprtantが付いている値が最優先されます。

詳細度 CSSスタイルシート | MDN

Comments

[shibakoppe]

ご丁寧にお教えいただきありがとうございました！
x_xさんのやり方で無事に解決することが出来ました。
AzumaOさんのやり方でもできるか試してみます！
拙い文章の中、ご回答いただきましてありがとうございました！

[退会済みユーザー]

いえいえ???? 解決出来たのなら何よりです???????? ご丁寧にありがとうございます(*´ω`*)