Geek Answers Handbook

Notification bar sliding at the top of the page

On the page, I would like to display a thank you message after submitting the form. I used this jquery

$(document).ready(function(){ $("#contactForm").submit(function(data) { $.post('web_contactoPrueba.php', {nombre: $('#nombre').val(), email: $('#email').val(), asunto: $('#asunto').val(), telefono: $('#telefono').val(), comentario: $('#comentario').val(), enviar: 'yes'}, function(data) { $("<div />", { class: 'topbar', text: data }).hide().prependTo("body") .slideDown('fast').delay(5000).slideUp(function() { $(this).remove(); $(location).attr('href','http://www.delagua.es/index.html');}); }, 'text') return false; }); });

and this CSS

 .topbar { background: #F68A0E; height: 60px; line-height:60px; font-size:25px; border-bottom: solid 2px #EEE; padding: 3px 0; text-align: center; color: white; }

And the current behavior is that it displays correctly on top of the page, but as I scroll through the subtitle button, I would like this bar to appear not from the top of the page, but from the top of the "current view (does this make sense?) And does not page content (which is being done now).

Is it possible to achieve this in a simple way (not the sharpest tool in the box)?

thanks

+4
source share
1 answer

I think that you can easily place your notification bar always at the top of the current viewport using some fixed positioning in your CSS properties.

 .topbar { background: #F68A0E; height: 60px; line-height:60px; font-size:25px; border-bottom: solid 2px #EEE; padding: 3px 0; text-align: center; color: white; /* properties to "lock" the top bar at the top of the viewport. */ position:fixed; top:0px; left:0px; width:100%; }

JsFiddle example

+3
source

More articles:


All Articles