Position.left Не отображается номер

-2

Эта ссылка будет внизу, но я дам вам краткое описание. Мне нужно выровнять div в том же горизонтальном положении, что и span, который находится внутри вложенных div. Чтобы сделать это, я пытаюсь выяснить, насколько далеко от права страницы. Похоже на это.Position.left Не отображается номер

var position = $('#creators-toggle').position(); 
$('#offset').html(position.top); 
$('#offset-left').html(position.left); 
var marginright = ($(window).width - position.left);

Когда я показываю position.left, я получаю 821.890625 Не знаю, почему кто-то может помочь?

Ссылка здесь: http://codepen.io/sbhenrichs/pen/ZOjyrm/

источник

2016-07-30 Sam Henrichs

Я не очень понимаю, что вы имеете в виду под «не знаю, почему», но вы получите это, потому что это положение этого элемента с левой стороны окна.

Если вы хотите, чтобы выровнять DIV в том же положении - вы должны поместить, если слева (а не справа) в точно таком же положении:

var position = $('#creators-toggle').position(); 
//$('#offset').html(position.top); 
//$('#offset-left').html(position.left); 
// This is how you can position the element at the exact horizontal position 
$('.creator-dropdown').css('left', position.left);

Вот пример:

$(document).ready(function() { 
 
\t var position = $('#creators-toggle').position(); 
 
\t $('#offset').html(position.top); 
 
\t $('#offset-left').html(position.left); 
 
    
 
\t $('.creator-dropdown').css('left', position.left); 
 
\t $('.creator-dropdown').hide(0); 
 
    
 
\t $('#creators-toggle').click(function() { 
 
\t \t if($('.creator-dropdown').is(':visible')) { 
 
\t \t \t $('.creator-dropdown').slideUp(250); 
 
\t \t } 
 
\t \t if($('.creator-dropdown').is(':hidden')) { 
 
\t \t \t $('.creator-dropdown').slideDown(250); 
 
\t \t } 
 
\t }); 
 
});

@import 'https://fonts.googleapis.com/css?family=Lato:100,300,400'; 
 
html { 
 
    font-family: "Lato", sans-serif; 
 
} 
 

 
html, head, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
h1, h2, h3, h4, h5, h6 { 
 
    font-weight: 300; 
 
} 
 

 
.navbar { 
 
    border-bottom: 1px solid #eee; 
 
    position: relative; 
 
    height: 70px; 
 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); 
 
} 
 

 
.nav-content { 
 
    width: 75%; 
 
    margin-left: 12.5%; 
 
} 
 

 
.brand-con { 
 
    line-height: 70px; 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 

 
.brand { 
 
    font-weight: 300; 
 
    font-size: 150%; 
 
    color: #33bf90; 
 
} 
 

 
.links-right { 
 
    display: inline-block; 
 
    float: right; 
 
    height: 100%; 
 
    line-height: 70px; 
 
    color: #696969; 
 
    font-weight: 300; 
 
} 
 

 
.link-right { 
 
    margin-right: 25px; 
 
    transition: all 250ms cubic-bezier(0.17, -0.3, 0.79, 1.29); 
 
} 
 
.link-right:hover { 
 
    color: #33bf90; 
 
} 
 

 
.creator-dropdown { 
 
    width: 225px; 
 
    border: 1px solid #eee; 
 
    position: absolute; 
 
    font-weight: 300; 
 
    padding: 20px; 
 
    top: 70px; 
 
    background: white; 
 
} 
 

 
.tab-left { 
 
    margin-left: 25px; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="navbar"> 
 
     <div class="nav-content"> 
 
     <div class="brand-con"> 
 
      <span class="brand">placeholder</span> 
 
     </div> 
 
     <div class="links-right"> 
 
      <span class="link-right" id="creators-toggle">Creators</span> 
 
      <span class="link-right">Our Mission</span> 
 
      <span class="link-right">About</span> 
 
      <span class="link-right">Contact Us</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="creator-dropdown"> 
 
     <span>Video Creators</span> 
 
     <br /> 
 
     <br /> 
 
     <span class="tab-left">What we can do for you</span> 
 
     <br /> 
 
     <br /> 
 
     <span class="tab-left">How you can help</span> 
 
     <br /> 
 
     <br /> 
 
     <br /> 
 
     <span>Bloggers</span> 
 
     <br /> 
 
     <br /> 
 
     <span class="tab-left">Why our service works best</span> 
 
     <br /> 
 
     <br /> 
 
     <span class="tab-left">What you can do</span> 
 
    </div> 
 
    <h1 id="offset"></h1> 
 
    <h1 id="offset-left"></h1> 
 
    </body> 
 
</html>

Если кто-то будет меняться с шириной Windo w - ваше позиционирование перестанет работать, и вам нужно будет переставить этот элемент.

Вы можете использовать это:

$('#creators-toggle').click(function() { 
    if($('.creator-dropdown').is(':visible')) { 
     $('.creator-dropdown').slideUp(250); 
    } 
    if($('.creator-dropdown').is(':hidden')) { 
     // This will re-position the element every time we should display it in the correct position. 
     var position = $(this).position(); 
     $('.creator-dropdown').css('left', position.left); 
     $('.creator-dropdown').slideDown(250); 
    } 
});

источник

2016-07-30 02:16:44 Dekel

Спасибо! Оглядываясь назад, я действительно не знаю, почему я делал это так, как был. Большое спасибо, это сработало. –

Position.left Не отображается номер

ответ

Смежные вопросы