I use Jquery ScrollTo, so when I click on a question at the top of the page, it will scroll through the question and answer further across the screen. This function works fine (to the point)
Now, when I click on a question that is called half the page, it will scroll, and my navigator will overlap half the question (I use a fixed navbar).
The second problem is that when I click "Up" (should scroll back to the top of the page), the first three questions are overlapped by the navigation bar.
If I remove the fixed from the navigation bar, everything works fine, but I would prefer to keep the fixed navigation
My code is as follows
View
<div class="links">
<ul class="top_links"> <li><a href="#1a">Question 1</a></li> <li><a href="#1b"> Question 2</a></li> <li><a href="#1c"> Question 3</a></li> <li><a href="#1d">Question 4</a></li> <li><a href="#1e">Question 5</a></li> </ul> </div> <ul class="faq"> <li><a name="1a"></a><span class="question">Q: Question 1</span><span class="answer">Follow the link marked join which will take you to the relevant section.We review each application for membership and aim to let you know within qo working days.</span><div class="top"><a href="#top">Top ^</a></div></li> <li><a name="1b"></a><span class="question">Q:Question 2</span><span class="answer">A: Follow the link marked Forensic Odontologist list which will take you to the page where Odontologists are listed by region with full contact details..</span><div class="top"><a href="#top">Top ^</a></div></li> <li><a name="1c"></a><span class="question">Q: Question 3</span><span class="answer">A: Unfortunately the subject is case dependent, which cannot be predicted. It is not a full time discipline. For this reason it is generally not possible to shadow an Odontologist - sorry.</span><div class="top"><a href="#top">Top ^</a></div></li> <li><a name="1d"></a><span class="question">Q: Question 4</span><span class="answer">A: You should look at the available courses by following the link marked courses and then contact the particular institution directly and not through BAFO.</span><div class="top"><a href="#top">Top ^</a></div></li> <li><a name="1e"></a><span class="question">Q:Question 5</span><span class="answer">A: Nunc non orci eget odio suscipit rutrum. Nullam quam neque, tempus at, semper in, semper eu, mi. Nulla eu turpis vitae arcu sagittis iaculis. Fusce ut nunc vel ligula convallis vulputate. Aliquam feugiat dui in risus. Sed hendrerit. Praesent mollis, ligula imperdiet viverra faucibus, diam turpis ullamcorper ipsum, eget posuere velit tellus et turpis. Vivamus facilisis est nec libero. Phasellus at velit. Vivamus sed mauris.</span><div class="top"><a href="#top">Top ^</a></div></li>
Jquery
$(document).ready(function () { $.localScroll(); $(".top_links > li > a").click(function () { $(".faq > li").removeClass('highlight'); var str = $(this).attr("href"); str = "a[name='" + str.substring(1) + "']"; $(str).parent().addClass('highlight'); });
});
I hope this is enough to continue. If anyone can make any suggestions, then they will be very grateful
An example is here http://jsfiddle.net/richlewis14/YsK29/ (apologies for massive css, but using bootstrap)
source share