scroll elementu fixed i połowy diva

0

Witam,
user image
co mam zrobić aby podczas scrollowania strony w pozycję fixed miał div1 i ciemniejsza połowa div2? chcę się pozbyć tej warstwy jasnej w divie drugim.

Pozdrawiam

0

user image

Opisz problem jeszcze raz, zrozumiale dla innych czytających

0

Podczas scrollowania strony w dół normalnie scrollują mi się dwa elementy i wygląda to tak
user image
a chcę, żeby podczas scrollowania te dwa elementy wyglądały tak
user image
czy wytłumaczyłem to trochę jaśniej?

0

Możesz dać jakiegoś linka? Również nie bardzo rozumiem o co chodzi. Divy Ci się rozjeżdżają czy co? Ewentualnie pokaż kod : )

0

coś jak tutaj: http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery
tylko, żeby przy scrollowaniu połowa diva demo_top też była scrollowana, czyli żeby część fixed wyglądała dokładnie tak jak na obrazku:
user image czyli tylko połowa diva demo_top też się scrolluje, a reszta zostaje.

0

W końcu wiem o Ci chodzi :: ) (chyba). Mam rozumieć ze masz dwa divy, pod którymi chcesz umieścić opcję fixed. Z tym że chcesz, aby ten 2 zaczął się przesuwać w połowie przewijania i w dodatku doczepił się do tego drugiego. Więc tak wejdź sobie tutaj http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/
Jest tam genialny poradnik. Podpowiem że po prostu musisz zrobić sobie takie dwa divy, które będą miały nadaną po odpowiednim obniżeniu strony funkcje fixed, z tym że jeden otrzyma fixed na innej wysokości(tak bowiem ta funkcja jest wykorzystywana) Aha no i raczej nie da się zrobić tak że połowa diva ma nadane fixed, a druga nie, jedynie co możesz zrobić to zrobić trzy divy. jeden obejmujacy dwa, drugi, który pozostanie obojętny na pozycję strony i trzeci, który będzie się przesuwał razem ze stroną.

Mam nadzieje że wszystko jasne : )

2

Wiesz postanowiłem Ci to zrobić.

<head>
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
<title>Przykład</title>
</head>
<body>
<div style="height:2000px;background-color: whitesmoke;">
<center>
<div class="header"><div>
<div class="pierwszy">
<div class="idacy"> <h1>Pierwszy Div</h1> </div>
<div class="pozostaly"></div>
</div>
<div class="drugi">
</div>

<style>
body{   height: 2000px; margin: 0;padding: 0;}
.header{ height:50px; // wysokość od pierwszego div }
.pierwszy{ width: 100%; height: 150px; }
.pozostaly{ width: 100%; background: yellow; height: 100px; }
.idacy{ width: 100%; background: orange; height: 50px; }
.drugi{ width: 100%; background: pink; height: 100px;}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}
.f-nav2{ z-index: 9999; position: fixed; left: 0; top: 50px; width: 100%;}
</style>

<script>

jQuery("document").ready(function($){
    
    var nav = $('.idacy');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 30) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
 
});


jQuery("document").ready(function($){
    
    var nav2 = $('.drugi');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 150) {
            nav2.addClass("f-nav2");
        } else {
            nav2.removeClass("f-nav2");
        }
    });
 
});
</script>

</div>
</body>

A jak to wygląda masz tutaj. http://mojastrona.di8.pl/przyklad.html

Mam nadzieje że pomogłem. Jakby co wyjaśnie kod ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1