Code à mettre dans un élément HTML (WIDGET) - Support de formation JIMDO

Support de formation

Code à mettre dans un élément HTML (WIDGET)

<header class="global-header">

<table align="" style="width: 100%;">

<tbody>

<tr>

<td>

<p style="text-align: center;">Colonne 1</p>

</td>

<td>

<p style="text-align: center;">Colonne 2</p>

</td>

<td>

<p style="text-align: center;">Téléphone : <span style="color: #ff9900; font-size: 20px;"><strong>06 64 12 <span style="color: #ff9900;">64</span> 60</strong></span></p>

</td>

</tr>

</tbody>

</table>

</header>

Widget HTML invisible mais ci dessous :

CSS a mettre dans le HEAD

Si tout en haut et que vous souhaitez que l'internaute puisse revoir le bandeau apparaitre quand il remonte vers le haut :

<style type="text/css">
/*<![CDATA[*/
/**** custom***/
.jtpl-main { margin-top: 50px; }

/*ul {
list-style-type:none;
text-align:right;
padding:0;
margin:0;
}
li {
display:inline-block;
margin-right: 1em;
line-height: 4em;
}*/

.global-header {
    width: 100%;
    background-color: #333;
    color: #efefef;
    position: fixed;
    top: 0;
    left: 0;
    transition: top .2s ease-in;
    height: 50px;
    font-size: 13px;
}

.js-global-header-scrolling {
top: -4em; /* Height of the header */
}



/*]]>*/
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
//Requires JQuery or Zepto
$(document).ready(function(){

// Cache Header
var $header = $('.global-header');

// Get height of global-header to use later as starting point
var $hHeight = $header.height();

// Set initial position to current position on page
var prevTop = $(window).scrollTop();

// Scroll event
$(window).on('scroll', function(e) {
st = $(this).scrollTop(); // Set scroll location
if (st > prevTop && st > $hHeight) {
    $header.addClass('js-global-header-scrolling');
} else {
    $header.removeClass('js-global-header-scrolling');
}
prevTop = st;
});

});

//]]>
</script>

Si vous souhaitez que ce texte ne s'affiche plus quand vous descendez, il ne réapparait que si il est en haut :

<style type="text/css">
/*<![CDATA[*/
/**** custom***/
.jtpl-main { margin-top: 50px; }

/*ul {
list-style-type:none;
text-align:right;
padding:0;
margin:0;
}
li {
display:inline-block;
margin-right: 1em;
line-height: 4em;
}*/

.global-header {
    width: 100%;
    background-color: #333;
    color: #efefef;
    position: fixed;
    top: 0;
    left: 0;
    transition: top .2s ease-in;
    height: 50px;
    font-size: 13px;
}

.js-global-header-scrolling {
top: -4em; /* Height of the header */
}



/*]]>*/
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
//Requires JQuery or Zepto
$(document).ready(function(){

// Cache Header
var $header = $('.global-header');

// Get height of global-header to use later as starting point
var $hHeight = $header.height();

// Set initial position to current position on page
var prevTop = $(window).scrollTop();

// Scroll event
$(window).on('scroll', function(e) {
st = $(this).scrollTop(); // Set scroll location
if (st > prevTop && st > $hHeight) {
    $header.addClass('js-global-header-scrolling');
} else {
    $header.removeClass('js-global-header-scrolling');
}
// prevTop = st;
});

});

//]]>
</script>