Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kaio_Vinicius

Cabeçalho fixo, âncoras na página, rolagem suave.

Por , em Desenvolvimento frontend

Recommended Posts

Kaio_Vinicius    0

Kaio_Vinicius
Postado

Oi pessoal, sou novato no fórum. Preciso de uma ajuda de vocês. Eu tenho interesse em fazer um site como esse: http://www.galpaonelore.com.br/

Eu tentei olhar o código-fonte mas não entendi muita coisa não, admito que nem cerca de 20%. Porque parece que os links são direcionados às páginas html e não às âncoras. Então eu gostaria de fazer o mesmo estilo, porém de uma forma mais simples.

Por exemplo, um cabeçalho com menu fixo. Várias <div> com âncoras e uma rolagem suave. Quando clicar no menu, a página deveria rolar, passando por baixo do cabeçalho e parar bem rente. Bom, o site está lá como exemplo. Para muitos pode parecer simples, mas eu não sei qual rumo tomar. Se souberem fazer da mesma maneira como o site acima, com links para páginas e não para âncoras, eu agradeceria muito. Mas só pelo fato de me ajudarem a fazer com âncoras eu já ficaria agradecido. Espero que as mentes brilhantes de vocês possam me ajudar.

Aguardo ansiosamente a resposta de vocês.

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Web_avallon    5

Web_avallon
Postado

Não é muito complicado de fazer.
Poste o código do seu site aqui amigão.
Mas vamos tentar da seguinte forma: crie o seu topo normalmente e coloque o meno dentro dessa div. No CSS defina o topo com o atributo: position: fixed; z-index: 999999999; Volte pro HTML e coloque as âncoras normalmente (se não souber como é só procurar o google).

 

 

Depois antes de fechar a tag <head>, cole o seguinte código:

<script type="text/javascript">
var ss = {
fixAllLinks: function() {
// Get a list of all links in the page
var allLinks = document.getElementsByTagName('a');
// Walk through the list
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks;
if ((lnk.href && lnk.href.indexOf('#') != -1) &&
( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) &&
(lnk.search == location.search)) {
// If the link is internal to the page (begins in #)
// then attach the smoothScroll function as an onclick
// event handler
ss.addEvent(lnk,'click',ss.smoothScroll);
}
}
},

smoothScroll: function(e) {
// This is an event handler; get the clicked on element,
// in a cross-browser fashion
if (window.event) {
target = window.event.srcElement;
} else if (e) {
target = e.target;
} else return;

// Make sure that the target is an element, not a text node
// within an element
if (target.nodeName.toLowerCase() != 'a') {
target = target.parentNode;
}

// Paranoia; check this is an A tag
if (target.nodeName.toLowerCase() != 'a') return;

// Find the <a name> tag corresponding to this href
// First strip off the hash (first character)
anchor = target.hash.substr(1);
// Now loop all A tags until we find one with that name
var allLinks = document.getElementsByTagName('a');
var destinationLink = null;
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks;
if (lnk.name && (lnk.name == anchor)) {
destinationLink = lnk;
break;
}
}
if (!destinationLink) destinationLink = document.getElementById(anchor);

// If we didn't find a destination, give up and let the browser do
// its thing
if (!destinationLink) return true;

// Find the destination's position
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}

// Stop any current scrolling
clearInterval(ss.INTERVAL);

cypos = ss.getCurrentYPos();

ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
ss.INTERVAL =
setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);

// And stop the actual click happening
if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
},

scrollWindow: function(scramount,dest,anchor) {
wascypos = ss.getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0,wascypos + scramount);
iscypos = ss.getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
// if we've just scrolled past the destination, or
// we haven't moved from the last scroll (i.e., we're at the
// bottom of the page) then scroll exactly to the link
window.scrollTo(0,dest);
// cancel the repeating timer
clearInterval(ss.INTERVAL);
// and jump to the link directly so the URL's right
location.hash = anchor;
}
},

getCurrentYPos: function() {
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (window.pageYOffset)
return window.pageYOffset;
return 0;
},

addEvent: function(elm, evType, fn, useCapture) {
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
}

ss.STEPS = 25;

ss.addEvent(window,"load",ss.fixAllLinks);

</script>

 

Isso fará todo o trabalho de rolagem suave.

Espero ter ajudado, sucesso!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaio_Vinicius    0

Kaio_Vinicius
Postado

Oi, eu fiz isso que você disse meio correndo e coloquei no 000webhost para que vocês vejam como ficou.

O endereço ficou assim: http://testeparaoforum.site90.net/

Vejam, o suposto menu com os links ficaram por cima, mas ao clicar no link a âncora rola perfeitamente, entretanto até o topo do navegador. Gostaria que ela parasse no menu. Tem como?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Web_avallon    5

Web_avallon
Postado

Não entendi muito bem cara. Parar no menu? Como assim? Ele já está parando no menu, não está?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaio_Vinicius    0

Kaio_Vinicius
Postado

Tipo, o menu está tampando uma parte do conteudo do link clicado. Eu gostaria que as divs parassem logo abaixo o link "Fale conosco". Entendeu? Fora isso, o resto está perfeito, a rolagem e o css (não a aparencia, mas os códigos)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Web_avallon    5

Web_avallon
Postado

Poste o código HTML aqui meu querido. Aonde está a âncora? Ela tem que estar no começo de cada texto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaio_Vinicius    0

Kaio_Vinicius
Postado

Ta aí o código da pagina index.html, feita no dreamweaver. Desculpe o tamanho, ta cheio de textos do lipsum.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste de rolagem</title>

<link href="estilos.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
var ss = {
  fixAllLinks: function() {
    // Get a list of all links in the page
    var allLinks = document.getElementsByTagName('a');
    // Walk through the list
    for (var i=0;i<allLinks.length;i++) {
      var lnk = allLinks[i];
      if ((lnk.href && lnk.href.indexOf('#') != -1) &&
          ( (lnk.pathname == location.pathname) ||
        ('/'+lnk.pathname == location.pathname) ) &&
          (lnk.search == location.search)) {
        // If the link is internal to the page (begins in #)
        // then attach the smoothScroll function as an onclick
        // event handler
        ss.addEvent(lnk,'click',ss.smoothScroll);
      }
    }
  },

  smoothScroll: function(e) {
    // This is an event handler; get the clicked on element,
    // in a cross-browser fashion
    if (window.event) {
      target = window.event.srcElement;
    } else if (e) {
      target = e.target;
    } else return;

    // Make sure that the target is an element, not a text node
    // within an element
    if (target.nodeName.toLowerCase() != 'a') {
      target = target.parentNode;
    }
 
    // Paranoia; check this is an A tag
    if (target.nodeName.toLowerCase() != 'a') return;
 
    // Find the <a name> tag corresponding to this href
    // First strip off the hash (first character)
    anchor = target.hash.substr(1);
    // Now loop all A tags until we find one with that name
    var allLinks = document.getElementsByTagName('a');
    var destinationLink = null;
    for (var i=0;i<allLinks.length;i++) {
      var lnk = allLinks[i];
      if (lnk.name && (lnk.name == anchor)) {
        destinationLink = lnk;
        break;
      }
    }
    if (!destinationLink) destinationLink = document.getElementById(anchor);

    // If we didn't find a destination, give up and let the browser do
    // its thing
    if (!destinationLink) return true;
 
    // Find the destination's position
    var destx = destinationLink.offsetLeft;
    var desty = destinationLink.offsetTop;
    var thisNode = destinationLink;
    while (thisNode.offsetParent &&
          (thisNode.offsetParent != document.body)) {
      thisNode = thisNode.offsetParent;
      destx += thisNode.offsetLeft;
      desty += thisNode.offsetTop;
    }
 
    // Stop any current scrolling
    clearInterval(ss.INTERVAL);
 
    cypos = ss.getCurrentYPos();
 
    ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
    ss.INTERVAL =
setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);
 
    // And stop the actual click happening
    if (window.event) {
      window.event.cancelBubble = true;
      window.event.returnValue = false;
    }
    if (e && e.preventDefault && e.stopPropagation) {
      e.preventDefault();
      e.stopPropagation();
    }
  },

  scrollWindow: function(scramount,dest,anchor) {
    wascypos = ss.getCurrentYPos();
    isAbove = (wascypos < dest);
    window.scrollTo(0,wascypos + scramount);
    iscypos = ss.getCurrentYPos();
    isAboveNow = (iscypos < dest);
    if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
      // if we've just scrolled past the destination, or
      // we haven't moved from the last scroll (i.e., we're at the
      // bottom of the page) then scroll exactly to the link
      window.scrollTo(0,dest);
      // cancel the repeating timer
      clearInterval(ss.INTERVAL);
      // and jump to the link directly so the URL's right
      location.hash = anchor;
    }
  },

  getCurrentYPos: function() {
    if (document.body && document.body.scrollTop)
      return document.body.scrollTop;
    if (document.documentElement && document.documentElement.scrollTop)
      return document.documentElement.scrollTop;
    if (window.pageYOffset)
      return window.pageYOffset;
    return 0;
  },

  addEvent: function(elm, evType, fn, useCapture) {
    // addEvent and removeEvent
    // cross-browser event handling for IE5+,  NS6 and Mozilla
    // By Scott Andrew
    if (elm.addEventListener){
      elm.addEventListener(evType, fn, useCapture);
      return true;
    } else if (elm.attachEvent){
      var r = elm.attachEvent("on"+evType, fn);
      return r;
    } else {
      alert("Handler could not be removed");
    }
  }
}

ss.STEPS = 25;

ss.addEvent(window,"load",ss.fixAllLinks);

</script> 




</head>

<body>
<div id="cabecalho">
  <p>Home<br />
  </p>
  <p><a href="#a-ensino-fundamental">Ensino Fundamental</a></p>
<p><a href="#a-ensino-medio">Ensino Médio</a></p>
  <p><a href="#a-pre-vestibular">Pré-vestibular</a></p>
  <p><a href="#a-fale-conosco">Fale Conosco</a></p>
</div>
<div id="ensino-fundamental">
  <p><a name="a-ensino-fundamental" id="a-ensino-fundamental"></a>Mauris consectetur purus in nunc tempor, ac scelerisque neque porttitor. Etiam vitae hendrerit orci, interdum blandit nibh. Vestibulum hendrerit nunc in ipsum sodales venenatis. Quisque faucibus suscipit odio, id mollis nibh gravida ut. Fusce tristique metus eu mollis vulputate. Fusce auctor dui vel erat consectetur, sed gravida nisi iaculis. Proin nec tortor pellentesque, dictum magna vel, dignissim metus. Donec ultricies id ligula non ultricies. Proin aliquam mi metus, in laoreet arcu semper quis. Donec gravida varius luctus. Nulla dolor leo, tempus eu dignissim eu, pulvinar nec nunc.</p>
<p>Maecenas in risus in risus convallis laoreet. Nunc eu erat sed risus condimentum porta. Nam ultricies sodales diam, sit amet lobortis erat ornare non. Morbi volutpat, erat at lobortis laoreet, eros ante rhoncus ipsum, id lacinia ligula mi non enim. Morbi sit amet urna vel urna scelerisque luctus. Duis aliquet tellus id hendrerit accumsan. Sed in rhoncus nulla. Vivamus euismod, tellus in fringilla posuere, elit lorem dapibus quam, a placerat felis orci eget risus. In dolor velit, sodales vitae orci eget, auctor commodo risus.</p>
  <p>Aliquam hendrerit lacus eget metus aliquam, vitae euismod ante scelerisque. Phasellus vel purus sed metus suscipit egestas sed quis orci. Phasellus vehicula vel orci eu suscipit. Pellentesque rutrum porta erat quis pharetra. Ut ut consequat turpis. Vivamus condimentum ligula eros. Curabitur ullamcorper tristique purus ac dignissim. Aliquam vel aliquet sapien. Etiam eget nisl interdum, tempus tortor gravida, viverra leo. Vestibulum interdum, neque ut dictum fringilla, quam arcu molestie nunc, in placerat justo est id ligula.</p>
  <p>Pellentesque vestibulum aliquam viverra. Duis nisl nulla, pretium vel tellus eget, suscipit aliquam nisi. Suspendisse potenti. Duis blandit varius luctus. Phasellus vulputate hendrerit malesuada. Vestibulum ac purus vel elit cursus blandit at ac felis. Nullam vitae fermentum elit, non varius arcu. Pellentesque pretium mi id orci euismod, ac suscipit lorem rhoncus.</p>
  <p>Phasellus quis lorem quis dui posuere auctor ut at justo. Etiam lectus magna, dapibus nec bibendum vel, aliquam eu turpis. Etiam imperdiet felis arcu, sed aliquet nisi elementum sed. Phasellus ornare risus vitae felis viverra interdum. Quisque imperdiet velit libero. Nunc imperdiet nisl vel ante vehicula, at ornare purus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ipsum libero. Sed faucibus ipsum felis, vitae blandit velit fringilla ut.</p>
  <p>Mauris id diam fringilla, sagittis lacus at, congue erat. Maecenas quis porttitor lacus. Sed id neque ac mi imperdiet feugiat. Sed augue lacus, mollis ac eros id, porttitor placerat nibh. Vivamus magna leo, pharetra nec lacinia sit amet, fermentum non dolor. Vivamus vel vestibulum orci, ac adipiscing metus. Suspendisse ultricies nisi quis cursus dapibus. Nulla in cursus nulla. Ut porta turpis quis urna tempor, at ultricies odio iaculis. Nullam a ullamcorper sapien. Praesent id dolor laoreet, vulputate quam ac, tincidunt nisi. Donec in est leo. In non est a massa fringilla auctor. Maecenas vel tempor lectus, at pretium arcu.</p>
  <p>Aenean tempor nisi vel odio fringilla, a tincidunt enim varius. Morbi vel suscipit velit. Nam ultricies lacinia volutpat. Pellentesque convallis elit ut rutrum hendrerit. Phasellus sed felis ornare, rhoncus metus fermentum, adipiscing nisi. Cras varius, tellus eget mattis pellentesque, libero dui malesuada lacus, sit amet porta justo dui a enim. Maecenas adipiscing lacus eget massa venenatis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Maecenas vitae neque quis lacus placerat eleifend sit amet eget purus. Etiam blandit faucibus aliquet. Morbi nec massa nibh. Donec eu dapibus ipsum. Morbi feugiat malesuada urna, id condimentum purus congue pharetra. Donec vitae fringilla orci. Morbi egestas, velit porttitor sodales consequat, ipsum mi fermentum ligula, tempus sodales elit magna sed dolor.</p>
  <p>Donec ac tristique nibh. Proin at lorem interdum, pulvinar dolor eget, pulvinar quam. Fusce non vestibulum lacus, fringilla bibendum nulla. Ut pretium blandit enim ut consequat. Integer euismod nisi eget metus suscipit scelerisque. Proin egestas ipsum ac eleifend facilisis. In hac habitasse platea dictumst. Sed dignissim tristique purus id fringilla. Ut id enim et purus feugiat ullamcorper ac et turpis. Mauris vitae nisl est. Sed imperdiet libero accumsan urna vestibulum, in rhoncus orci ultrices.</p>
  <p>Ut ultrices leo libero. Fusce tristique mi eget lectus sodales ultricies. Donec sit amet odio odio. Integer elementum, purus dapibus venenatis semper, velit purus tristique lectus, a fringilla massa sem in neque. Phasellus ut egestas diam, non pellentesque ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dolor lectus, lacinia vitae elit eu, molestie viverra ligula. Aliquam erat volutpat. Maecenas dui tortor, dictum in consectetur ac, ornare sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="ensino-medio">
  <p><a name="a-ensino-medio" id="a-ensino-medio"></a>Mauris consectetur purus in nunc tempor, ac scelerisque neque porttitor. Etiam vitae hendrerit orci, interdum blandit nibh. Vestibulum hendrerit nunc in ipsum sodales venenatis. Quisque faucibus suscipit odio, id mollis nibh gravida ut. Fusce tristique metus eu mollis vulputate. Fusce auctor dui vel erat consectetur, sed gravida nisi iaculis. Proin nec tortor pellentesque, dictum magna vel, dignissim metus. Donec ultricies id ligula non ultricies. Proin aliquam mi metus, in laoreet arcu semper quis. Donec gravida varius luctus. Nulla dolor leo, tempus eu dignissim eu, pulvinar nec nunc.</p>
  <p>Maecenas in risus in risus convallis laoreet. Nunc eu erat sed risus condimentum porta. Nam ultricies sodales diam, sit amet lobortis erat ornare non. Morbi volutpat, erat at lobortis laoreet, eros ante rhoncus ipsum, id lacinia ligula mi non enim. Morbi sit amet urna vel urna scelerisque luctus. Duis aliquet tellus id hendrerit accumsan. Sed in rhoncus nulla. Vivamus euismod, tellus in fringilla posuere, elit lorem dapibus quam, a placerat felis orci eget risus. In dolor velit, sodales vitae orci eget, auctor commodo risus.</p>
  <p>Aliquam hendrerit lacus eget metus aliquam, vitae euismod ante scelerisque. Phasellus vel purus sed metus suscipit egestas sed quis orci. Phasellus vehicula vel orci eu suscipit. Pellentesque rutrum porta erat quis pharetra. Ut ut consequat turpis. Vivamus condimentum ligula eros. Curabitur ullamcorper tristique purus ac dignissim. Aliquam vel aliquet sapien. Etiam eget nisl interdum, tempus tortor gravida, viverra leo. Vestibulum interdum, neque ut dictum fringilla, quam arcu molestie nunc, in placerat justo est id ligula.</p>
  <p>Pellentesque vestibulum aliquam viverra. Duis nisl nulla, pretium vel tellus eget, suscipit aliquam nisi. Suspendisse potenti. Duis blandit varius luctus. Phasellus vulputate hendrerit malesuada. Vestibulum ac purus vel elit cursus blandit at ac felis. Nullam vitae fermentum elit, non varius arcu. Pellentesque pretium mi id orci euismod, ac suscipit lorem rhoncus.</p>
  <p>Phasellus quis lorem quis dui posuere auctor ut at justo. Etiam lectus magna, dapibus nec bibendum vel, aliquam eu turpis. Etiam imperdiet felis arcu, sed aliquet nisi elementum sed. Phasellus ornare risus vitae felis viverra interdum. Quisque imperdiet velit libero. Nunc imperdiet nisl vel ante vehicula, at ornare purus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ipsum libero. Sed faucibus ipsum felis, vitae blandit velit fringilla ut.</p>
  <p>Mauris id diam fringilla, sagittis lacus at, congue erat. Maecenas quis porttitor lacus. Sed id neque ac mi imperdiet feugiat. Sed augue lacus, mollis ac eros id, porttitor placerat nibh. Vivamus magna leo, pharetra nec lacinia sit amet, fermentum non dolor. Vivamus vel vestibulum orci, ac adipiscing metus. Suspendisse ultricies nisi quis cursus dapibus. Nulla in cursus nulla. Ut porta turpis quis urna tempor, at ultricies odio iaculis. Nullam a ullamcorper sapien. Praesent id dolor laoreet, vulputate quam ac, tincidunt nisi. Donec in est leo. In non est a massa fringilla auctor. Maecenas vel tempor lectus, at pretium arcu.</p>
  <p>Aenean tempor nisi vel odio fringilla, a tincidunt enim varius. Morbi vel suscipit velit. Nam ultricies lacinia volutpat. Pellentesque convallis elit ut rutrum hendrerit. Phasellus sed felis ornare, rhoncus metus fermentum, adipiscing nisi. Cras varius, tellus eget mattis pellentesque, libero dui malesuada lacus, sit amet porta justo dui a enim. Maecenas adipiscing lacus eget massa venenatis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Maecenas vitae neque quis lacus placerat eleifend sit amet eget purus. Etiam blandit faucibus aliquet. Morbi nec massa nibh. Donec eu dapibus ipsum. Morbi feugiat malesuada urna, id condimentum purus congue pharetra. Donec vitae fringilla orci. Morbi egestas, velit porttitor sodales consequat, ipsum mi fermentum ligula, tempus sodales elit magna sed dolor.</p>
  <p>Donec ac tristique nibh. Proin at lorem interdum, pulvinar dolor eget, pulvinar quam. Fusce non vestibulum lacus, fringilla bibendum nulla. Ut pretium blandit enim ut consequat. Integer euismod nisi eget metus suscipit scelerisque. Proin egestas ipsum ac eleifend facilisis. In hac habitasse platea dictumst. Sed dignissim tristique purus id fringilla. Ut id enim et purus feugiat ullamcorper ac et turpis. Mauris vitae nisl est. Sed imperdiet libero accumsan urna vestibulum, in rhoncus orci ultrices.</p>
  <p>Ut ultrices leo libero. Fusce tristique mi eget lectus sodales ultricies. Donec sit amet odio odio. Integer elementum, purus dapibus venenatis semper, velit purus tristique lectus, a fringilla massa sem in neque. Phasellus ut egestas diam, non pellentesque ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dolor lectus, lacinia vitae elit eu, molestie viverra ligula. Aliquam erat volutpat. Maecenas dui tortor, dictum in consectetur ac, ornare sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="pre-vestibular">
  <p><a name="a-pre-vestibular" id="a-pre-vestibular"></a>Mauris consectetur purus in nunc tempor, ac scelerisque neque porttitor. Etiam vitae hendrerit orci, interdum blandit nibh. Vestibulum hendrerit nunc in ipsum sodales venenatis. Quisque faucibus suscipit odio, id mollis nibh gravida ut. Fusce tristique metus eu mollis vulputate. Fusce auctor dui vel erat consectetur, sed gravida nisi iaculis. Proin nec tortor pellentesque, dictum magna vel, dignissim metus. Donec ultricies id ligula non ultricies. Proin aliquam mi metus, in laoreet arcu semper quis. Donec gravida varius luctus. Nulla dolor leo, tempus eu dignissim eu, pulvinar nec nunc.</p>
  <p>Maecenas in risus in risus convallis laoreet. Nunc eu erat sed risus condimentum porta. Nam ultricies sodales diam, sit amet lobortis erat ornare non. Morbi volutpat, erat at lobortis laoreet, eros ante rhoncus ipsum, id lacinia ligula mi non enim. Morbi sit amet urna vel urna scelerisque luctus. Duis aliquet tellus id hendrerit accumsan. Sed in rhoncus nulla. Vivamus euismod, tellus in fringilla posuere, elit lorem dapibus quam, a placerat felis orci eget risus. In dolor velit, sodales vitae orci eget, auctor commodo risus.</p>
  <p>Aliquam hendrerit lacus eget metus aliquam, vitae euismod ante scelerisque. Phasellus vel purus sed metus suscipit egestas sed quis orci. Phasellus vehicula vel orci eu suscipit. Pellentesque rutrum porta erat quis pharetra. Ut ut consequat turpis. Vivamus condimentum ligula eros. Curabitur ullamcorper tristique purus ac dignissim. Aliquam vel aliquet sapien. Etiam eget nisl interdum, tempus tortor gravida, viverra leo. Vestibulum interdum, neque ut dictum fringilla, quam arcu molestie nunc, in placerat justo est id ligula.</p>
  <p>Pellentesque vestibulum aliquam viverra. Duis nisl nulla, pretium vel tellus eget, suscipit aliquam nisi. Suspendisse potenti. Duis blandit varius luctus. Phasellus vulputate hendrerit malesuada. Vestibulum ac purus vel elit cursus blandit at ac felis. Nullam vitae fermentum elit, non varius arcu. Pellentesque pretium mi id orci euismod, ac suscipit lorem rhoncus.</p>
  <p>Phasellus quis lorem quis dui posuere auctor ut at justo. Etiam lectus magna, dapibus nec bibendum vel, aliquam eu turpis. Etiam imperdiet felis arcu, sed aliquet nisi elementum sed. Phasellus ornare risus vitae felis viverra interdum. Quisque imperdiet velit libero. Nunc imperdiet nisl vel ante vehicula, at ornare purus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ipsum libero. Sed faucibus ipsum felis, vitae blandit velit fringilla ut.</p>
  <p>Mauris id diam fringilla, sagittis lacus at, congue erat. Maecenas quis porttitor lacus. Sed id neque ac mi imperdiet feugiat. Sed augue lacus, mollis ac eros id, porttitor placerat nibh. Vivamus magna leo, pharetra nec lacinia sit amet, fermentum non dolor. Vivamus vel vestibulum orci, ac adipiscing metus. Suspendisse ultricies nisi quis cursus dapibus. Nulla in cursus nulla. Ut porta turpis quis urna tempor, at ultricies odio iaculis. Nullam a ullamcorper sapien. Praesent id dolor laoreet, vulputate quam ac, tincidunt nisi. Donec in est leo. In non est a massa fringilla auctor. Maecenas vel tempor lectus, at pretium arcu.</p>
  <p>Aenean tempor nisi vel odio fringilla, a tincidunt enim varius. Morbi vel suscipit velit. Nam ultricies lacinia volutpat. Pellentesque convallis elit ut rutrum hendrerit. Phasellus sed felis ornare, rhoncus metus fermentum, adipiscing nisi. Cras varius, tellus eget mattis pellentesque, libero dui malesuada lacus, sit amet porta justo dui a enim. Maecenas adipiscing lacus eget massa venenatis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Maecenas vitae neque quis lacus placerat eleifend sit amet eget purus. Etiam blandit faucibus aliquet. Morbi nec massa nibh. Donec eu dapibus ipsum. Morbi feugiat malesuada urna, id condimentum purus congue pharetra. Donec vitae fringilla orci. Morbi egestas, velit porttitor sodales consequat, ipsum mi fermentum ligula, tempus sodales elit magna sed dolor.</p>
  <p>Donec ac tristique nibh. Proin at lorem interdum, pulvinar dolor eget, pulvinar quam. Fusce non vestibulum lacus, fringilla bibendum nulla. Ut pretium blandit enim ut consequat. Integer euismod nisi eget metus suscipit scelerisque. Proin egestas ipsum ac eleifend facilisis. In hac habitasse platea dictumst. Sed dignissim tristique purus id fringilla. Ut id enim et purus feugiat ullamcorper ac et turpis. Mauris vitae nisl est. Sed imperdiet libero accumsan urna vestibulum, in rhoncus orci ultrices.</p>
  <p>Ut ultrices leo libero. Fusce tristique mi eget lectus sodales ultricies. Donec sit amet odio odio. Integer elementum, purus dapibus venenatis semper, velit purus tristique lectus, a fringilla massa sem in neque. Phasellus ut egestas diam, non pellentesque ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dolor lectus, lacinia vitae elit eu, molestie viverra ligula. Aliquam erat volutpat. Maecenas dui tortor, dictum in consectetur ac, ornare sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="fale-conosco">
  <p><a name="a-fale-conosco" id="a-fale-conosco"></a>Mauris consectetur purus in nunc tempor, ac scelerisque neque porttitor. Etiam vitae hendrerit orci, interdum blandit nibh. Vestibulum hendrerit nunc in ipsum sodales venenatis. Quisque faucibus suscipit odio, id mollis nibh gravida ut. Fusce tristique metus eu mollis vulputate. Fusce auctor dui vel erat consectetur, sed gravida nisi iaculis. Proin nec tortor pellentesque, dictum magna vel, dignissim metus. Donec ultricies id ligula non ultricies. Proin aliquam mi metus, in laoreet arcu semper quis. Donec gravida varius luctus. Nulla dolor leo, tempus eu dignissim eu, pulvinar nec nunc.</p>
  <p>Maecenas in risus in risus convallis laoreet. Nunc eu erat sed risus condimentum porta. Nam ultricies sodales diam, sit amet lobortis erat ornare non. Morbi volutpat, erat at lobortis laoreet, eros ante rhoncus ipsum, id lacinia ligula mi non enim. Morbi sit amet urna vel urna scelerisque luctus. Duis aliquet tellus id hendrerit accumsan. Sed in rhoncus nulla. Vivamus euismod, tellus in fringilla posuere, elit lorem dapibus quam, a placerat felis orci eget risus. In dolor velit, sodales vitae orci eget, auctor commodo risus.</p>
  <p>Aliquam hendrerit lacus eget metus aliquam, vitae euismod ante scelerisque. Phasellus vel purus sed metus suscipit egestas sed quis orci. Phasellus vehicula vel orci eu suscipit. Pellentesque rutrum porta erat quis pharetra. Ut ut consequat turpis. Vivamus condimentum ligula eros. Curabitur ullamcorper tristique purus ac dignissim. Aliquam vel aliquet sapien. Etiam eget nisl interdum, tempus tortor gravida, viverra leo. Vestibulum interdum, neque ut dictum fringilla, quam arcu molestie nunc, in placerat justo est id ligula.</p>
  <p>Pellentesque vestibulum aliquam viverra. Duis nisl nulla, pretium vel tellus eget, suscipit aliquam nisi. Suspendisse potenti. Duis blandit varius luctus. Phasellus vulputate hendrerit malesuada. Vestibulum ac purus vel elit cursus blandit at ac felis. Nullam vitae fermentum elit, non varius arcu. Pellentesque pretium mi id orci euismod, ac suscipit lorem rhoncus.</p>
  <p>Phasellus quis lorem quis dui posuere auctor ut at justo. Etiam lectus magna, dapibus nec bibendum vel, aliquam eu turpis. Etiam imperdiet felis arcu, sed aliquet nisi elementum sed. Phasellus ornare risus vitae felis viverra interdum. Quisque imperdiet velit libero. Nunc imperdiet nisl vel ante vehicula, at ornare purus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ipsum libero. Sed faucibus ipsum felis, vitae blandit velit fringilla ut.</p>
  <p>Mauris id diam fringilla, sagittis lacus at, congue erat. Maecenas quis porttitor lacus. Sed id neque ac mi imperdiet feugiat. Sed augue lacus, mollis ac eros id, porttitor placerat nibh. Vivamus magna leo, pharetra nec lacinia sit amet, fermentum non dolor. Vivamus vel vestibulum orci, ac adipiscing metus. Suspendisse ultricies nisi quis cursus dapibus. Nulla in cursus nulla. Ut porta turpis quis urna tempor, at ultricies odio iaculis. Nullam a ullamcorper sapien. Praesent id dolor laoreet, vulputate quam ac, tincidunt nisi. Donec in est leo. In non est a massa fringilla auctor. Maecenas vel tempor lectus, at pretium arcu.</p>
  <p>Aenean tempor nisi vel odio fringilla, a tincidunt enim varius. Morbi vel suscipit velit. Nam ultricies lacinia volutpat. Pellentesque convallis elit ut rutrum hendrerit. Phasellus sed felis ornare, rhoncus metus fermentum, adipiscing nisi. Cras varius, tellus eget mattis pellentesque, libero dui malesuada lacus, sit amet porta justo dui a enim. Maecenas adipiscing lacus eget massa venenatis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Maecenas vitae neque quis lacus placerat eleifend sit amet eget purus. Etiam blandit faucibus aliquet. Morbi nec massa nibh. Donec eu dapibus ipsum. Morbi feugiat malesuada urna, id condimentum purus congue pharetra. Donec vitae fringilla orci. Morbi egestas, velit porttitor sodales consequat, ipsum mi fermentum ligula, tempus sodales elit magna sed dolor.</p>
  <p>Donec ac tristique nibh. Proin at lorem interdum, pulvinar dolor eget, pulvinar quam. Fusce non vestibulum lacus, fringilla bibendum nulla. Ut pretium blandit enim ut consequat. Integer euismod nisi eget metus suscipit scelerisque. Proin egestas ipsum ac eleifend facilisis. In hac habitasse platea dictumst. Sed dignissim tristique purus id fringilla. Ut id enim et purus feugiat ullamcorper ac et turpis. Mauris vitae nisl est. Sed imperdiet libero accumsan urna vestibulum, in rhoncus orci ultrices.</p>
  <p>Ut ultrices leo libero. Fusce tristique mi eget lectus sodales ultricies. Donec sit amet odio odio. Integer elementum, purus dapibus venenatis semper, velit purus tristique lectus, a fringilla massa sem in neque. Phasellus ut egestas diam, non pellentesque ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dolor lectus, lacinia vitae elit eu, molestie viverra ligula. Aliquam erat volutpat. Maecenas dui tortor, dictum in consectetur ac, ornare sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>

Esse é o código do CSS, não sei se há necessidade, mas postei também:

@charset "utf-8";
/* CSS Document */

*{
	margin:0;
}
#cabecalho{
	background-color:#09C;
	position:fixed;
	z-index:999999999;
	width:100%;
	
}

#ensino-fundamental{
	background-color:#0CF;
}

#ensino-medio{
	background-color:#096;
}

#pre-vestibular{
	background-color:#F60;
}

#fale-conosco{
	background-color:#CCC;
}

Obrigado desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Web_avallon    5

Web_avallon
Postado

Acho que já achei o problema meu querido. Pelo menos comigo aqui deu certo. Coloque a âncora antes das divs!

 

 

  • <a name="a-ensino-fundamental" id="a-ensino-fundamental"></a>
  • <div id="ensino-fundamental">
  • <p>Mauris consectetur purus in nunc tempor, ac scelerisque neque porttitor. Etiam vitae hendrerit orci, interdum blandit nibh. Vestibulum hendrerit nunc in ipsum sodales venenatis. Quisque faucibus suscipit odio, id mollis nibh gravida ut. Fusce tristique metus eu mollis vulputate. Fusce auctor dui vel erat consectetur, sed gravida nisi iaculis. Proin nec tortor pellentesque, dictum magna vel, dignissim metus. Donec ultricies id ligula non ultricies. Proin aliquam mi metus, in laoreet arcu semper quis. Donec gravida varius luctus. Nulla dolor leo, tempus eu dignissim eu, pulvinar nec nunc.</p>
  • </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaio_Vinicius    0

Kaio_Vinicius
Postado

Oi cara, peço desculpas pela demora. O fórum não estava dando pra acessar aqui em casa.

Então... fiz o que você disse sobre colocar a âncora antes da div. Não funcionou. =/ Não postei o código novamente porque a única mudança foram as linhas de códigos que inseriam as âncoras. Entretanto atualizei o site exemplo que eu hospedei no 000webhost e citei acima.

Será que ainda tem solução esse problema?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Web_avallon    5

Web_avallon
Postado

Sem problemas meu caro.

Vamos tentar o seguinte então: no menu, depois do atributo position: fixed, coloque: top: 0; left: 0; right: 0; (se ele sair do lugar, tire o right). Depois nos links, coloque um display: block; se não der certo, tente um display: block; position: relative.

Comigo deu certo aqui amigão!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaio_Vinicius    0

Kaio_Vinicius
Postado

Poxa cara, será que tem como você me passar esses arquivos do seu PC pra eu ver como você está exatamente fazendo? Porque aqui não está funcionando. Às vezes eu olhando o seu arquivo eu consiga me basear. Te enviei uma mensagem com meu e-mail, caso você possa mandar.

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

virtualeelo    0

virtualeelo
Postado

Estou com o mesmo problema do amigo acima pessoal, meu menu fixo fica por cima do conteúdo, alguma coisa consegui resolver utilizando padding-top, mas não é para todas as resoluções de monitores e tals, estou com bastante dor de cabeça sobre isso, no fim o amigo não respondeu se resolveu ou não.

 

Estou no aguardo!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito