Bloc fixe dans la barre latérale. Menu supérieur fixe et barre latérale flottante dans WordPress. Deux blocs ou plus sont corrigés les uns après les autres

Quelles sont les exigences pour la mise en page :

• Disposition en caoutchouc à deux colonnes
• barre latérale largeur fixe 300px
• le contenu est étiré sur toute la largeur restante.
• pied de page enfoncé vers le bas (dans cette leçon, je ne montrerai pas comment cela se fait).

Si vous faites flotter les blocs, vous devez leur donner une largeur fixe (vous ne pouvez pas définir 1 barre latérale à 300px et le contenu à 100%). Dans ce cas, soit le contenu glissera vers le bas, soit un défilement horizontal de 300px vers la gauche apparaîtra. Bon, l'essentiel est de comprendre que cette méthode ne nous convient pas.

De nombreux maquettistes proposent cette méthode, à quoi pensent-ils ?! L'essence de la méthode est que vous pouvez définir la barre latérale pour qu'elle flotte avec une largeur de 300, mais le contenu ne doit pas flotter et lui donner margin-left:300px. Bonne façon et tout semble si bien se passer. Pour être honnête, je pensais que c’était la meilleure solution, mais cette méthode a ses pièges. Les raisons d'abandonner cette méthode sont que si soudainement dans le contenu que nous présentons, par exemple, un menu avec un li flottant ou tout autre bloc flottant et que nous voulons ensuite les effacer en utilisant clear:both, alors la bordure inférieure de ce bloc glisse jusqu'au niveau du bord inférieur de la barre latérale (Ce qui n'est pas étrange puisque le foat est dégagé, cela peut être évité si le bloc flottant a une hauteur fixe, mais ce n'est pas du tout le cas avec la définition d'une hauteur fixe hauteur).

Vous pouvez utiliser la position absolue pour la barre latérale, mais seulement si vous êtes absolument sûr que le contenu sera plus grand en hauteur que la barre latérale, sinon tout le contenu de la barre latérale grimpera sur le pied de page (après tout, le positionnement absolu le retire de le flux général).

mais pour moi, ce n'est pas non plus une très bonne solution !

"C'est une excellente méthode, s'il y a des lacunes, veuillez commenter. Mais je pense que c'est la meilleure méthode."

• Les avantages de cette méthode : premièrement, le contenu DOMe ira avant la barre latérale, ce qui est bon pour les moteurs de recherche.
• rien ne rentre dans le pied de page
• tous les blocs peuvent être effacés et rien ne glissera vers la bordure inférieure (c'est ainsi que nous avons surmonté les problèmes de la deuxième méthode).

En général, comment ça marche : regardez le code, le contenu vient en premier, suivi de la barre latérale. définissez un flotteur sur ces deux blocs (naturellement, la barre latérale glisse vers le bas). après cela, nous définissons la propriété de la barre latérale margin-left : -100 %. super, il est remis en place, et on indente le contenu avec margin-lerft:300px.

Un bloc flottant (ou comme on l'appelle aussi mobile, fixe, collant) est nécessaire sur le site pour que l'utilisateur, lors du défilement de la page, voie un élément fixe, dans lequel la publicité est le plus souvent placée (teasers, bannières ou contexte) .

Malheureusement, les règles Adsense nous interdisent de le faire. Cependant, de nombreux propriétaires de sites Web ignorent les règles à leurs risques et périls. Peut-être qu'ils ne sont même pas punis pour cela, mais je ne conseillerais pas de prendre ce risque.

Je place mes teasers/bannières dans de tels blocs YAN, et parfois au lieu de faire de la publicité, je les y affiche messages similaires ou quelques informations utiles au visiteur.

Voyons comment créer un bloc flottant sur votre site Web.

Tâche : rendre flottant le dernier bloc de la colonne latérale (barre latérale). De plus, pour qu'il ne colle qu'au moment où l'utilisateur y accède en scrollant, et non immédiatement à l'ouverture de la page. De plus, le bloc doit « coller » lorsqu’il atteint le pied de page (c’est-à-dire ne pas le chevaucher).

Il existe de nombreuses options pour implémenter un bloc collant, mais toutes ne fonctionnent pas correctement. je te le dirai de expérience personnelle: la même méthode d'installation d'un bloc peut fonctionner sur un site, mais des jambages apparaîtront sur un autre.

Vous trouverez ci-dessous un exemple de bloc flottant qui a fonctionné sur presque tous les sites où je l'ai installé. Il n'y avait pas de arcs. Le moteur n’a pas non plus d’importance (DLE, WordPress, LiveStreet, etc.).

A l'endroit souhaité dans la colonne latérale, collez le code HTML suivant :

$(window).scroll(function() (
varsb_m = 20 ; /* remplissage au-dessus et en dessous */
var mo = 300 ; / * hauteur du sous-sol avec marge */
var st = $(window).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.hauteur();

Si(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
si(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(( "paddingTop" : h) ) ;
}
autre(
sb.css(( "paddingTop" : 0 ) ) ;
}
}
} ) ;

Dans ce code, vous pouvez définir le remplissage en haut, en bas, ainsi que la hauteur de votre pied de page, c'est-à-dire la hauteur à laquelle le bloc doit s'arrêter.

Connectons maintenant JS. Pour ce faire, écrivez dans la section HEAD :

C'est également une méthode de sécurité, mais en installant un plugin. Cela fonctionne sans jambages.

Avantages :

• pas besoin de comprendre/comprendre HTML ;
• simplicité et rapidité d'installation.

Défauts:

Comment utiliser:

Elles m'ont semblé moins pratiques et moins claires que les deux méthodes ci-dessus. Mais je vais quand même vous en parler.

Insérez dans la barre latérale :

Nous écrivons les styles en HTML (il vaut mieux les ajouter directement en CSS) :

.collant(
poste : fixe ;
indice z : 101 ;
}
.arrêt(
position : relative ;
indice z : 101 ;
}

Maintenant, nous ajoutons le script lui-même à la page (il vaut mieux le mettre dans fichier séparé, comme dans « La méthode la plus efficace » :

(fonction() (
var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // si zéro est remplacé par un nombre, le bloc restera collé avant que le bord supérieur de la fenêtre du navigateur n'atteigne le bord supérieur de l'élément. Peut être un nombre négatif
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
fonction Ascroll() (
si (b == nul) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
pour (var je = 0 ; je< Sa.length; i++) {
if (Sa[ i].indexOf("box-sizing" ) == 0 || Sa[ i].indexOf("overflow" ) == 0 || Sa[ i].indexOf("width" ) == 0 || Sa[ i].indexOf("padding" ) == 0 || Sa[ i].indexOf("border" ) == 0 || Sa[ i].indexOf("outline" ) == 0 || Sa[ i].indexOf("box-shadow" ) == 0 || Sa[ i].indexOf("background" ) == 0 ) (
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.enfants[ 0 ] ;
a.style .height = b.getBoundingClientRect() .height + "px" ;
a.style .padding = "0" ;
a.style .border = "0" ;
}
var Ra = a.getBoundingClientRect() ,
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // sélecteur de bloc, lorsque vous atteignez le bord supérieur duquel vous devez détacher l'élément collant ; Math.round() est uniquement destiné à IE ; si zéro est remplacé par un nombre, alors le bloc restera collé avant que le bord inférieur de l'élément n'atteigne le pied de page
if ((Ra.top - P) Comment créer un bloc (div, side, etc.), en-tête, publicité, menu corrigé. Uniquement CSS #aside1 ( /* bloc qui restera en place */ poste : fixe ; indice z : 101 ; )

En fait, dans la plupart des cas : des boutons flottants réseaux sociaux, compteurs, aucun script requis.

C'est-à-dire que l'élément avec des liens (ou autre) est situé loin du début de la page. Disons qu'un grand en-tête ou une colonne latérale contient de nombreuses informations utiles, telles que la recherche, les catégories, etc. Lorsque, lors du défilement, le haut de la fenêtre du navigateur touche le bord supérieur d'un élément, celui-ci se colle et « descend » jusqu'à la fin de la page.