Position: Fixed element not passing through pointer-event click

Posted Jan 01, 1970 12:00 AM

I have a navbar that becomes fixed on scroll, when this happens part of it overlays a title that I still want to be clickable.

HTML

<div id="latestWrapper">
    <div id="lwBuff"></div>
    <div id="lwContainer">
        <div id="lwTitle"></div>
        <div id="lwMenu"></div>
    </div>
</div>

CSS

div#latestWrapper {
    height:50px;
    top:145px;
    width:100%;
    text-align:left;
    z-index:1000;
    position:fixed;
}
div#lwBuff {
    float:left;
    width:40px;
    min-height:100%;
}
div#lwContainer {
    min-height:100%;
    margin-left:40px;
}
div#lwTitle {
    float:left;
    height:50px;
    width:17%;
    position:relative;
    pointer-events:none; /* I want to click through this element */
    background-size: 100%;
    background:url('../images/transparent.png');
}
div#lwMenu {
    float:left;
    height:50px;
    width:83%;
    background:#fff;
}

I want to click through #lwTitle, when the element is fixed there's an anchor that I want to click.

Tagged pointer

Similar Topic Questions

Webkit browsers: position:fixed element not behaving as expected

Here is a code example I've thrown together: http://codepen.io/Nuwen/full/LHubs/ The .fixed div should fadeIn/Out on scroll, controlled by jQuery. This is working correctly in Firefox, but not Chrome or other webkit browsers. On the advice of other posts, I've added the...

Posted Jul 29, 2014 2:23 AM

Header is not passing through Jquery ajax to Java webservice

We are posting json url using jquery ajax. $.ajax({ type: "POST", ...

Posted Nov 21, 2013 5:06 AM

Vertical centred and horizontal top-aligned position fixed element

I am coming up with a jQuery notification system for a website I am building and I need the notification banner to be top aligned horizontally and vertically centered on the page. I figured out the top alignment, but I can't...

Posted Nov 28, 2013 1:08 AM

Horizontally centre position fixed element

I have a notification system I am building in jquery and I am trying to horizontally center the notification's container div. I've tried left:50%;, margin:0 auto;, and `left:50%; and right:50%;' none of which work. So I resorted to estimating the centre ...

Posted Nov 28, 2013 11:29 AM

Centre position:fixed element horizontally

I'm trying to horizontally centre a position fixed element in all viewports. Here's what I've tried: margin:0 auto;, left:50%;, left:50%; and right:50%;, $('.notification').css('marginLeft', -$('.notification').outerWidth/2); , and .notification-board.center{ left: 50%; -ms-transform:translateX(-50%); -moz-transform:translateX(-50%); ...

Posted Nov 28, 2013 1:58 AM

Data is not passing through url

I am trying to pass an id to a controller through url but the problem is it gives me the id field null result of the edit link is like "localhost/home71/project_management/index.php/boq_account/edit?id=" $url=base_url(); echo "<td id='edit'><a href='$url project_management/index.php/boq_account/edit?id='$n->id''>Edit</a></td>"; i have tried so many ways but not...

Posted Dec 11, 2013 12:58 PM

Codeigniter form validation not passing through data variable

When the form_validation function passes it does not pass the $data variable. This is my code: //If the edit button is pressed if...

Posted Dec 13, 2013 7:06 AM

Mobile safari position:fixed element appears in front during scrolling even

I know iphone used to not support position:fixed, but now it does and I'm seeing a weird glitch when I scroll a fixed position element behind other elements with higher z-index. The fixed positions element with the lower z-index appears...

Posted Dec 29, 2013 8:33 AM

NG-CLICK simple function in Angular not passing through variable

I have a defined a basic controller which has a function called setSector (at the bottom) function AppCtrl ($scope) { $scope.sectors = { "Sector": [ ...

Posted Jan 21, 2014 11:25 AM

Position fixed does not work in Google Chrome

In my website and in this page I have a background image for my page. This background image must be fixed. This page works correctly in Firefox, but doesn't work in Google Chrome . the background image css is like...

Posted Apr 15, 2014 2:19 AM

Variable not passing through to expression

Hello,I have created a variable in a SQL Task and assigned it to a string variable. When I debug the container with a breakpoint, I can see the correct date value being assigned to the variable. I have an ADO...

Posted May 22, 2014 2:45 AM

Detect when a position: fixed; element crosses over another element

I'm wonder if its is possible to to detect when an element with the css property position: fixed; crosses over another element while scrolling. My goal is to prevent a fixed position div from ever crossing over a statically...

Posted Jun 05, 2014 5:46 AM

GET parameter not passing through

I'm having a weird error while trying to pass GET variables. On the product page I have multiple sizes for the same product, each size has its own form with two variables, product ID (product_id) and quantity (qty), that are...

Posted Jun 26, 2014 5:59 AM

Cordova Android position fixed is not going well when the page scroll down

Please help me.. I don't know what to do anymore.. I'm working on android project now, I'm using cordova 3.5. I made a swipeable menu, when I swipe to the left, the menu slide in from right, and when I swipe...

Posted Jul 08, 2014 12:40 PM

Setting max-height on position fixed element

I have an notifications element located in the button left of the page with notifications popping from the bottom #alert-wrap { position: fixed; bottom: 0; left: 0; height: 300px; // <--- THIS IS THE PROBLEM ...

Posted Jul 17, 2014 7:52 AM

Fixed position, 100% height element, not always 100% on mobile

I want a 40px, 100% height element that is fixed to the left of my responsive website, obviously I need it to be 100% at all times and it works fine on desktop browsers. The problem arises when I'm on a...

Posted Dec 24, 2013 5:29 AM

CSS Position fixed not fixing header to top

I am trying to fix the position of my header and cause a CSS transition on certain amount of scroll like this link Here is my [attempt at mimicking] http://115.252.139.175:1337/ the position fixed for the header. Unfortunately, the header keeps scrolling...

Posted Nov 24, 2013 2:55 AM

Fixed Positioned Element Not Acting As Expected

Fixed position is suppose to keep elements at a certain position even when the document is scrolled down or up. However, I can't get this behavior to work on my website. I'm working on a loading element to show the users...

Posted Nov 25, 2013 1:51 AM

CSS position fixed div still displayed in respect to parent element

I have a the following mark-up: <nav class="np-global-menu"> <div class="np-overlay"></div> <ul> <li><a href="#">Create</a></li> ...

Posted Dec 01, 2013 5:32 AM

 
 
Email:

Username:

Password:


Register

Username:

Password:

Login


Forgot Password
Reset my password!