Responsive design et div qui suit le scroll

Salut à tous,

Je suis débutant en javascript, je cherche depuis un moment mais je ne trouve pas.

Je me suis donc décidé écrire mon premier post, soyez indulgent svp

j'ai un script qui permet de faire suivre ma div suivant le scroll

	
<div id="primary_block">
<div id=""pb-right-column" class="left_block"></div>
</div>
<div id="new-products_block_zen_right"></div>

var positionElementInPage = $('.left_block').offset().top - 47;
var hauteurleft_block = document.getElementById('pb-right-column').offsetHeight;
var positionDivInferieur = $('#new-products_block_zen_right').offset().top;
 
 
$(window).scroll(
function() {
         
var scrollTop = $(window).scrollTop();
         
         
if (scrollTop >= positionElementInPage && scrollTop <= (positionDivInferieur - hauteurleft_block)) {
 
    // fixed
    $('.left_block').addClass('fixed').removeClass('absolute');
             
} else if (scrollTop >= positionElementInPage && scrollTop >= (positionDivInferieur - hauteurleft_block)) {
             
    // absolute
    $('.left_block').removeClass('fixed').addClass('absolute');
             
} else {
    // relative
    $('.left_block').removeClass('fixed').removeClass('absolute');
}
     
         
}
);

.left_block.fixed {
position: fixed !important;
top: 47px !important;
}
 
.left_block.absolute {
position: absolute !important;
bottom: 0px !important;
}

J'ai mis un décalage de 47px afin qu'un menu qui suit également le scroll ne chevauche pas ma div.

Jusque là tout fonctionne

Alors voila :

Quand je réduit ma fenêtre en dessous de 991px de large le menu ne suit plus le scroll donc le décalage n'est plus utile (l'idéale serais d'avoir un décalage de 5px).

Et quand je continue a réduire en dessous de 776px de large ma div ne doit plus suivre le scroll, je veux annuler le script.

j'ai essayé de faire quelque chose avec Matchmedia() et resize

// Fonction exécutée au redimensionnement
function redimensionnement() {
    var result = document.getElementById('result');
    if("matchMedia" in window)
 
 
                if(window.matchMedia("(min-width:992px)").matches) {
             
             
             
 
        } else if(window.matchMedia("(max-width:767px)").matches) {
             
 
         
         
        } else {
             
                 
 
 
        }
    }
}
// On lie l'événement resize à la fonction
window.addEventListener('resize', redimensionnement, false);
 
// Exécution de cette même fonction au démarrage pour avoir un retour initial
redimensionnement();

Mon but étant de pouvoir lancer ou non mon script suivant la résolution et que celle-ci soit détecté en live

Malheureusement je ne sais pas comment m'y prendre, j'ai effectué pas mal de test mais ça bug toujours un peu.

Une idée ?

Adrien

Bonjour et bienvenue sur le forum, AdrienLandes

Poursimplifier, tu peux peut-être tout simplement te baser sur la largeur de la fenêtre du navigateur ?
Exemple (avec jQuery) :

var largeur = $(window).width();
if (largeur < 776) {
    // faire des choses
} 

J'oubliais, il faut aussi penser au resize navigateur :

$(window).resize(function() {
    // faire de trucs
});

Bonjour,

Merci pour ton aide

Je vais tester et je reviens vers toi.

Salut,
je suis désolé de répondre si tardivement. Je n'avais pas temps de me plonger dans le JS.
Alors j'ai fait un script mais ça bug sauf si on rafraichie la page.
une idée ?

var pics_scroll = function(){
			var largeur = $(window).width();
			var positionElementInPage = $('.left_block').offset().top - 47;
			var positionElementInPage_min_resolution = $('.left_block').offset().top - 5;
			var hauteurleft_block = document.getElementById('pb-right-column').offsetHeight;
			var positionDivInferieur = $('#new-products_block_zen_right').offset().top;
			
	if (largeur > 992)  {
	
			
	
	
			$(window).scroll(
			function() {
				
			
			var scrollTop = $(window).scrollTop();
					
		
			if (scrollTop >= positionElementInPage && scrollTop <= (positionDivInferieur - hauteurleft_block)) {

				// fixed
				$('.left_block').addClass('fixed').removeClass('absolute').removeClass('fixed_min_resolution');
			
			} else if (scrollTop >= positionElementInPage && scrollTop >= (positionDivInferieur - hauteurleft_block)) {
			
				// absolute
				$('.left_block').removeClass('fixed').addClass('absolute').removeClass('fixed_min_resolution');
			
			} else {
				// relative
				$('.left_block').removeClass('fixed').removeClass('absolute').removeClass('fixed_min_resolution');
			}
	
		
			}
			);



	}else if(largeur<767) {
			
				
		
		
			$(window).scroll(
			function() {
        
			
			var scrollTop = $(window).scrollTop();			
		
			if (scrollTop >= positionElementInPage_min_resolution && scrollTop <= (positionDivInferieur - hauteurleft_block)) {

			// fixed
			$('.left_block').removeClass('fixed_min_resolution').removeClass('absolute').removeClass('fixed');
			
			} else if (scrollTop >= positionElementInPage_min_resolution && scrollTop >= (positionDivInferieur - hauteurleft_block)) {
			
			// absolute
			$('.left_block').removeClass('fixed_min_resolution').removeClass('absolute').removeClass('fixed');
			
			} else {
			// relative
			$('.left_block').removeClass('fixed_min_resolution').removeClass('absolute').removeClass('fixed');
			}
			
		
		
			}
			);



		
		
	} else {
			
				

			$(window).scroll(
			function() {
        
				
			var scrollTop = $(window).scrollTop();
				
			if (scrollTop >= positionElementInPage_min_resolution && scrollTop <= (positionDivInferieur - hauteurleft_block)) {

			// fixed
			$('.left_block').addClass('fixed_min_resolution').removeClass('absolute').removeClass('fixed');
			
			} else if (scrollTop >= positionElementInPage_min_resolution && scrollTop >= (positionDivInferieur - hauteurleft_block)) {
			
			// absolute
			$('.left_block').removeClass('fixed_min_resolution').addClass('absolute').removeClass('fixed');
			
			} else {
			// relative
			$('.left_block').removeClass('fixed_min_resolution').removeClass('absolute').removeClass('fixed');
			}
					
		
			}
			);


	
	
	};
	
};

pics_scroll();

$(window).resize(function() {
 pics_scroll();
});