0

I'm making a website for my territory group. Well the template is good on the whole, but there's something I don't quite know how to achieve. In the body there are two divs. The upper one has a height of 100vh. The downer one is for news and articles. I put a nav over the second which of course is in a static position set. Now what I want to achieve is to make it fixed once you reach its container div by scrolling down. I've searched a lot for this, and it seems fair to say that pretty much looks like the jQuery "scroll to fixed" case. I am pretty new to jQuery, although I can understand it a bit because I am more familiar with PHP, but for some reason the script didn't work. It may also be because of some missing plugin script in the head, so please if you have the answer don't forget to include the plugin scripts to add in the head. Anyway, here's the example script of what I tried (combining with css class to which I gave position: fixed; and top: 0; values) 

$(function(){
  $(window).scroll(function() {
    if ($(this).scrollTop() >= 290) {
      $('nav.main-nav').addClass('stickytop');
    }
    else {
      $('nav.main-nav').removeClass('stickytop');
    }
  });
});
trevorp
  • 1,161
  • 1
  • 14
  • 19
Giorgio Vitanza
  • 9
  • 5
  • It would probably help us if you could share the relevant parts of your HTML and CSS (and JS) so we could see the whole thing in action. Could you set up a JSFiddle or something? – trevorp Jul 07 '17 at 16:06
  • @trevorp yes, here is how i tried it: https://jsfiddle.net/ox0ru4qx/ - I included the head section to show the script that should include jquery plugin – Giorgio Vitanza Jul 07 '17 at 16:32
  • 1
    It is [working](https://jsfiddle.net/5s75pwbL/). Or, is it not what you want? – Tejasvi Karne Jul 07 '17 at 16:36
  • It's working on jsfiddle, but not in my website for some reason... @TejasviKarne – Giorgio Vitanza Jul 07 '17 at 16:38
  • Then add the portion that's causing the problem.Include HTML, CSS also. If you need help, look at how to post a [minimal, complete and verfiable example](https://stackoverflow.com/help/mcve) – Tejasvi Karne Jul 07 '17 at 16:45
  • @TejasviKarne here's how I wrote it in my html, and now u can see that if u scroll to make the window smaller the nav won't scroll with it... https://jsfiddle.net/ox0ru4qx/8/ – Giorgio Vitanza Jul 07 '17 at 16:55
  • @Giorgio Vitanza Please post the source as you see it in the browser(right-click and 'view source'). That would be much easier than this back and forth. It would also be useful in the future for any one with the same problem looking for an answer. If you think the data is sensitive, replace it with dummy text and post it here – Tejasvi Karne Jul 07 '17 at 17:08
  • @TejasviKarne https://jsfiddle.net/7undbb8L/ ok here it is. The content is ok since it is just a template for now – Giorgio Vitanza Jul 07 '17 at 17:14
  • The code you posted here is different from what you actually have in your source. Try this and let me know. Just add enough enough text in your wordpress post so that the page is long enough like [this](https://jsfiddle.net/a1t1cuaf/). See if it works and let me know. – Tejasvi Karne Jul 07 '17 at 17:28
  • @TejasviKarne Yes I achieved something by doing this, I also tried giving the article.post area some height to try it out, and it kinda works, but not perfectly, cos if i make the window smaller, simulating a mobile phone, the bar will appear as fixed after scrolling down a bit instead of remaining on the top - gave article.post 300vh height, works fine with tablet and pc screen but not with smartphone – Giorgio Vitanza Jul 07 '17 at 17:35
  • Isn't your fixed the same as remaining on top? – Tejasvi Karne Jul 07 '17 at 17:42
  • yes, but for some reason when the screen is smaller I have to scroll a bit to make it appear and remain on the top, whereas there's no such problem on tablet size and pc size screen – Giorgio Vitanza Jul 07 '17 at 17:45
  • I achieved it! It was a tough goal, but I found another way that worked. I used the solution posted here, and then I just changed the value of the scrollTop() to the size of my upper div's height (423), and that did the trick! https://stackoverflow.com/questions/8644248/jquery-fix-div-when-browser-scrolls-to-it – Giorgio Vitanza Jul 07 '17 at 19:25
  • It actually still gives me problems that way, so I set it back to the first function... I copied all my html and php, all my css, in jsfiddle, and it works just fine there... But wordpress won't run my function unless I inspect the element now, and not quite perfectly, could it be a wordpress related issue then? Here is my whole code, just copied and pasted - https://jsfiddle.net/5b6ygusm/2/ - @TejasviKarne – Giorgio Vitanza Jul 08 '17 at 10:42

0 Answers0