Inspiring

Answered

Aside sticky on the right when scrolling

Forum|Forum|8 years ago
December 11, 2017
1 reply
1911 views

Hallo

DW CC 2018 ist toll - danke allen, die daran gearbeitet haben.

Trotz vielem Suchen habe ich keine Lösung gefunden für mein Anliegen:

In meinem Layout habe ich rechts eine Sidebar mit News (keine Navigation).

Diese Sidebar sollte immer sichtbar bleiben, auch wenn der Seiteninhalt gescrollt wird.

Gibt es eine Lösung nur mit CSS?

Für jeden Hinweis bin ich dankbar!

This topic has been closed for replies.

Correct answer Nancy OShea

Add a pull-right utility class to your column.

<nav class="col-sm-3 pull-right" id="myScrollspy">

Nancy

Community Expert

Community Expert

With Bootstrap, use the Affix utility class. See working code example below.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body { position: relative; }

.affix {

top: 20px;

z-index: 9999 !important;

}

div.col-sm-9 div {

height: 250px;

font-size: 28px;

}

#section1 {

color: #fff;

background-color: #1E88E5;

}

#section2 {

color: #fff;

background-color: #673ab7;

}

#section3 {

color: #fff;

background-color: #ff9800;

}

#section41 {

color: #fff;

background-color: #00bcd4;

}

#section42 {

color: #fff;

background-color: #009688;

}

@media screen and (max-width: 810px) {

#section1, #section2, #section3, #section41, #section42 { margin-left: 150px; }

}

</style>

</head>

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:220px;">

<h1>Scrollspy & Affix Example</h1>

<h3>Fixed vertical sidenav on scroll</h3>

<p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>

<p>The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.</p>

</div>

<br>

<div class="container">

<div class="row">

<nav class="col-sm-3" id="myScrollspy">

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">

<li><a href="#section1">Section 1</a></li>

<li><a href="#section2">Section 2</a></li>

<li><a href="#section3">Section 3</a></li>

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#section41">Section 4-1</a></li>

<li><a href="#section42">Section 4-2</a></li>

</ul>

</li>

</ul>

</nav>

<div class="col-sm-9">

<div id="section1">

<h1>Section 1</h1>

<p>Try to scroll this section and look at the navigation list while scrolling!</p>

</div>

<div id="section2">

<h1>Section 2</h1>

<p>Try to scroll this section and look at the navigation list while scrolling!</p>

</div>

<div id="section3">

<h1>Section 3</h1>

<p>Try to scroll this section and look at the navigation list while scrolling!</p>

</div>

<div id="section41">

<h1>Section 4-1</h1>

<p>Try to scroll this section and look at the navigation list while scrolling!</p>

</div>

<div id="section42">

<h1>Section 4-2</h1>

<p>Try to scroll this section and look at the navigation list while scrolling!</p>

</div>

</div>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea— Product User & Community Expert

PizzaPastaAuthor

Inspiring

Thank you so, Nancy

this example works - but it is not the complete resolution of my problem.

I would have the sidebar on the right side of the screen.

Looking in the internet, I found many proposals to fix a navbar on the left side as your example does, but I prefer it fixed on the right side, as I wrote.

Do I have to change the z-index? - This is something relative unknown for me.

And another question: is there any possibility to resolve this problem without js, only by CSS?

Many thanks

Community Expert

Community Expert

Try

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,
body {
height: 100%
}
.wrap {
width: 100%;
height: 100%;
position: relative
}
.head {
height: 100px;
position: fixed;
top: 0;
left: 0;
width: 100%
}
.bodywrap {
margin-top: 100px;
}
.right {
width: 200px;
top: 100px;
bottom: 0px;
position: fixed;
}
.center {
margin-right: 200px;
}
.right {
right: 0
}
.right {
background-color: #ccc
}
.head {
background-color: #777
}
</style>
</head>
<body>
<div class='wrap'>
<div class='head'>Header</div>
<div class='bodywrap'>
<div class='right'>right</div>
<div class='center'>center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center centercenter center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center centercenter center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center </div>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!