SirROG
Mitglied
Hallo
Ich möchte für meine Website gerne die Slidebarnavi der Seite http://plugins.adchsm.me/slidebars/usage.php verwenden.
Dies funktioniert auch prima, nur leider habe ich bei meiner Seite ein responsives Backgroundbild und sobald ich nun nach unten scrolle, scrollt dieses leider beim Chrome und Safari mit (sollte eig. wie im Firefox und Internet Explorer (11) fixiert bleiben.
Mit diesem CSS Code ohne dem Slidebarnavi css Code funktioniert dies auch in allen Browsern aber in Kombination mit dem Slidebarnavi cCSS Code leider nicht.
Hier der responsive Background bild Code:
Kann mir wer helfen habe nun schon mehrere Tage mit diversen CSS Anpassungen herumgeübt aber bin leider nicht auf eine Lösung gestossen.
Hier der gesamte CSS Code:
Oder ich habe hier auch mal eine einfache Beispielseite mit dem Problem erstellt: http://www.roginnovation.com/tutorials/website/javascript/slidebars/navibarexample.html
Ich möchte für meine Website gerne die Slidebarnavi der Seite http://plugins.adchsm.me/slidebars/usage.php verwenden.
Dies funktioniert auch prima, nur leider habe ich bei meiner Seite ein responsives Backgroundbild und sobald ich nun nach unten scrolle, scrollt dieses leider beim Chrome und Safari mit (sollte eig. wie im Firefox und Internet Explorer (11) fixiert bleiben.
Mit diesem CSS Code ohne dem Slidebarnavi css Code funktioniert dies auch in allen Browsern aber in Kombination mit dem Slidebarnavi cCSS Code leider nicht.
Hier der responsive Background bild Code:
Code:
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://rogfrog.com/backgroundimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-color: #000000;
font-family: calibri, arial;
font-size: 1em;
color: #bcbcbc;
text-align: center;Kann mir wer helfen habe nun schon mehrere Tage mit diversen CSS Anpassungen herumgeübt aber bin leider nicht auf eine Lösung gestossen.
Hier der gesamte CSS Code:
Oder ich habe hier auch mal eine einfache Beispielseite mit dem Problem erstellt: http://www.roginnovation.com/tutorials/website/javascript/slidebars/navibarexample.html
Code:
/* -----------------------------------
* Slidebars
* Version 0.10.3
* http://plugins.adchsm.me/slidebars/
*
* Written by Adam Smith
* http://www.adchsm.me/
*
* Released under MIT License
* http://plugins.adchsm.me/slidebars/license.txt
*
* -------------------
* Slidebars CSS Index
*
* 001 - Box Model, Html & Body
* 002 - Site
* 003 - Slidebars
* 004 - Animation
* 005 - Helper Classes
*
* ----------------------------
* 001 - Box Model, Html & Body
*/
html, body, #sb-site, .sb-site-container{
/* Set box model to prevent any user added margins or paddings from altering the widths or heights. */
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://rogfrog.com/backgroundimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-color: #000000;
font-family: calibri, arial;
font-size: 1em;
color: #bcbcbc;
text-align: center;
}
html, body {
width: 100%;
overflow-x: hidden; /* Stops horizontal scrolling. */
}
html {
height: 100%; /* Site is as tall as device. */
}
body {
min-height: 100%;
height: auto;
position: relative; /* Required for static Slidebars to function properly. */
}
html.sb-active #sb-site, .sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close {
cursor: pointer;
}
/* Site scroll locking - prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */
html.sb-scroll-lock.sb-active:not(.sb-static) {
overflow: hidden;
}
/* ----------
* 002 - Site
*/
#sb-site, .sb-site-container {
/* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */
width: 100%;
min-height: 100vh;
position: relative;
z-index: 1; /* Site sits above Slidebars */
background-color: #ffffff; /* Default background colour, overwrite this with your own css. I suggest moving your html or body background styling here. Making this transparent will allow the Slidebars beneath to be visible. */
}
/* Micro clearfix by Nicolas Gallagher, ensures the site container hits the top and bottom of the screen. */
#sb-site:before, #sb-site:after, .sb-site-container:before, .sb-site-container:after {
content: ' ';
display: table;
}
#sb-site:before, #sb-site:after, .sb-site-container:before, .sb-site-container:after {
clear: both;
}
/* ---------------
* 003 - Slidebars
*/
.sb-slidebar {
height: 100%;
overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */
position: fixed;
top: 0;
z-index: 0; /* Slidebars sit behind sb-site. */
display: none; /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
background-color: #222222; /* Default Slidebars background colour, overwrite this with your own css. */
}
.sb-slidebar, .sb-slidebar * {
-webkit-transform: translateZ( 0px ); /* Fixes issues with translated and z-indexed elements on iOS 7. */
}
.sb-left {
left: 0; /* Set Slidebar to the left. */
}
.sb-right {
right: 0; /* Set Slidebar to the right. */
}
html.sb-static .sb-slidebar,
.sb-slidebar.sb-static {
position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
}
.sb-slidebar.sb-active {
display: block; /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */
}
.sb-style-overlay {
z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */
}
.sb-momentum-scrolling {
-webkit-overflow-scrolling: touch; /* Adds native momentum scrolling for iOS & Android devices. */
}
/* Slidebar widths for browsers/devices that don't support media queries. */
.sb-slidebar {
width: 30%;
}
.sb-width-thin {
width: 15%;
}
.sb-width-wide {
width: 45%;
}
@media (max-width: 480px) { /* Slidebar widths on extra small screens. */
.sb-slidebar {
width: 70%;
}
.sb-width-thin {
width: 55%;
}
.sb-width-wide {
width: 85%;
}
}
@media (min-width: 481px) { /* Slidebar widths on small screens. */
.sb-slidebar {
width: 55%;
}
.sb-width-thin {
width: 40%;
}
.sb-width-wide {
width: 70%;
}
}
@media (min-width: 768px) { /* Slidebar widths on medium screens. */
.sb-slidebar {
width: 40%;
}
.sb-width-thin {
width: 25%;
}
.sb-width-wide {
width: 55%;
}
}
@media (min-width: 992px) { /* Slidebar widths on large screens. */
.sb-slidebar {
width: 30%;
}
.sb-width-thin {
width: 15%;
}
.sb-width-wide {
width: 45%;
}
}
@media (min-width: 1200px) { /* Slidebar widths on extra large screens. */
.sb-slidebar {
width: 20%;
}
.sb-width-thin {
width: 5%;
}
.sb-width-wide {
width: 35%;
}
}
/* ---------------
* 004 - Animation
*/
.sb-slide, #sb-site, .sb-site-container, .sb-slidebar {
-webkit-transform: translate( 0px );
-moz-transform: translate( 0px );
-o-transform: translate( 0px );
transform: translate( 0px );
-webkit-transition: -webkit-transform 400ms ease;
-moz-transition: -moz-transform 400ms ease;
-o-transition: -o-transform 400ms ease;
transition: transform 400ms ease;
-webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */
-webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
}
/* --------------------
* 005 - Helper Classes
*/
.sb-hide {
display: none; /* Optionally applied to control classes when Slidebars is disabled over a certain width. */
}