0
J'ai trois divs dans une page qui Accueil, modèle et 3d. modèle et 3d div résidera hors de l'écran.Comment faire défiler la page à gauche - droite où div gauche est hors de l'écran
Lorsque je clique sur l'ancre de navigation, la page défile jusqu'à la div cible.
J'ai besoin d'utiliser la fonction de défilement de jQuery car à l'avenir j'utiliserai cette fonction de défilement dans parallex. Ci-dessous est le code qui est utilisé pour faire défiler mais qui ne parvient pas à afficher div gauche qui est hors de l'écran.
et js lien violon http://jsfiddle.net/naresh_kumar/CEC3L/4/
<div id="page" class="clearfix" style="width: 1800px; left: -500px;">
<div id="header">
<div class="nav-enabled">
<ul id='navigation'>
<li><a href="#home">Home</a></li>
<li><a href="#templates">Templates</a></li>
<li><a href="#3d">3D</a></li>
</ul>
</div>
</div>
<div id="templates" class="content" style="height: 378px; width: 516px;">
Template
</div>
<div id="home" class="content" style="height: 378px; width: 516px;">
Home
</div>
<div id="3d" class="content" style="height: 378px; width: 516px;">
3D
</div>
</div>
<script>
$(function() {
$('ul#navigation a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
<style>
#page
{
background: none repeat scroll 0 0 #E6E6E8;
height: auto;
min-height: 100%;
position: relative;
top: 0;
}
.content
{
background: none repeat scroll 0 0 #E6E6E8;
color: #000000;
float: left;
}
#header
{
clear: both;
color: #FFFFFF;
display: block;
}
#header .nav-enabled
{
display: block;
float: left;
height: auto;
left: 0;
opacity: 0.72;
padding: 20px;
position: fixed;
top: 0;
width: auto;
z-index: 5;
}
</style>
http://stackoverflow.com/questions/13492656/infinite-scrolling-for-elements-which-are-positioned-absolute/13492819#13492819 –
son non fonctionnant bien .. quand vous avez cliqué sur le modèle alors div de modèle ne montre pas. –
scroller fonctionne bien ... –