Grow your CSS skills. Land your dream job.

Is there a way to override jQuery offset when using media queries?

  • # April 17, 2013 at 4:47 am

    Hi guys,

    I have the following problem. I am using a single page design and use jQuery to get an offset of -85. It works for the larger screens, but as soon as I apply the media queries, the headers on each page disappear. What is the correct way to sort out the issue? CSS/JavaScript…. and where on planet Earth do I begin?

    $(‘.scroll’).click(function(event) {
    event.preventDefault();

    var full_url = this.href;

    var parts = full_url.split(‘#’);
    var trgt = parts[1];

    //var target_offset = $(‘#’+trgt).offset();
    var target_offset = $(‘#’+trgt).offset();
    var target_top = target_offset.top -85;

    //add the magic
    $(‘html, body’).animate({scrollTop:target_top}, 500);

    });

    $(‘nav#navigation a’).click(function(){
    $(‘nav#navigation a’).removeClass(‘active’);
    $(this).addClass(‘active’);
    });

    http://cdpn.io/vBqin

    # April 17, 2013 at 4:48 am

    Let me know if you require the demo url (it’s still a working progress – so it’s not done as yet)

    # April 17, 2013 at 2:52 pm

    codepen plz

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".